vue?請求攔截器的配置方法詳解

更新時(shí)間：2022年01月03日 14:10:40 作者：超超有點(diǎn)闊愛

這篇文章主要為大家介紹了vue?請求攔截器的配置方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

按如下步驟進(jìn)行

1.request.js內(nèi)容：http request請求攔截器和http response服務(wù)器響應(yīng)攔截器配置

2.http.js內(nèi)容：請求數(shù)據(jù)方式封裝

3.utils.js內(nèi)容：獲取token，判斷token是否存在

4.store文件：

vuex 倉庫配置

vuex 持久化
vuex 模板引用

5.接口的封裝

request.js內(nèi)容

http request請求攔截器和http response服務(wù)器響應(yīng)攔截器配置

// http request 請求攔截器，有token值則配置上token值
import axios from 'axios'
import Promise from 'promise'
import util from './utils';
import store from './../store/index';
const service = axios.create({
    timeout: 60000, // 請求超時(shí)時(shí)間
    headers: {
        // Authorization: Authorization,
        'Content-Type': 'application/json;charset=UTF-8'
    }
});
// http請求攔截器
service.interceptors.request.use(
    config => {
        let tokenExist = util.tokenExist();
        if (tokenExist) {
            // bus.$emit('toggleloading', true)//顯示loading
            //如果token存在
            config.headers['Authorization'] = `Bearer ${util.getToken()}`;
        }
        // Toast.loading({
        //     message: '加載中...',
        //     duration: 0,
        //     forbidClick: true
        // });
        return config;
    },
    error => {
        Promise.reject(error);
    }
)
// http response 服務(wù)器響應(yīng)攔截器，
// 這里攔截401錯(cuò)誤，并重新跳入登頁重新獲取token
service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            //通訊成功
            // Toast.clear();
            /*************
             * response.data.status === 0 錯(cuò)誤
             * response.data.status === 100 成功
             * response.data.status === 401 token過期
             *
             * *************/
            // bus.$emit('toggleloading', false)//隱藏loading
            if (response.data.state === 401) {
                //如果是token過期，跳轉(zhuǎn)至登錄
                Message.error("登錄已過期，請重新登錄！");
                store.commit('SET_TOKEN', '');
                util.goLogin();
            } else if (response.data.state === 0) {
                // Message.error(response.data.message);
                return response.data;
            } else {
                return response.data;
            }
        }
    },
    error => {
        //請求失敗
        // ;
        const response = error.response;
        if (response.status === 401) {
            // Toast.fail(response.data.message);
            Message.error("登錄已過期，請重新登錄！");
            util.goLogin();
        } else if (response.status === 403) {
            $router.push({
                name: '403'
            });
        } else {
            // Toast.fail(response.data.message ? response.data.message : '系統(tǒng)錯(cuò)誤請聯(lián)系管理員');
            // Message.error({
            //     message: '無服務(wù)，請聯(lián)系管理員'
            // });
        }
        return Promise.reject(error);
    }
);
export default service;

http.js內(nèi)容

請求數(shù)據(jù)方式

import request from './request';
// import store from './../store/index';
const http = {
    request(config) {
        request(config);
    },
    post(url, data) {
        // if(data instanceof Object){
        // }else{
        //     data = {
        //         ...data
        //     };
        // }
        return request({
            url,
            method: 'post',
            data
        });
    },
    postFile(url, data, contentType) {
        return request({
            url,
            method: 'post',
            data,
            contentType
        });
    },
    get(url, params) {
        return request({
            url,
            method: 'get',
            params
        });
    },
    put(url, data) {
        return request({
            url,
            method: 'put',
            data
        });
    },
    delete(url) {
        return request({
            url,
            method: 'delete'
        });
    },
    download(url, params) {
        return request({
            url,
            method: 'get',
            params,
            responseType: 'blob'
        });
    },
    downloadPost(url, data) {
        return request({
            url,
            method: 'post',
            data,
            responseType: 'blob'
        });
    }
};
export default http;

utils.js內(nèi)容

獲取token，判斷token是否存在

import store from '../store/index';
let util = {
    //獲取token
    getToken() {
        return store.getters.token;
    },
    //判斷token是否存在
    tokenExist() {
        let flag;
        let token = store.getters.token;
        if (token && token !== '') {
            flag = true;
        } else {
            flag = false;
        }
        return token;
    },
}
export default util

vuex 倉庫配置

vuex 持久化
vuex 模板引用

index.js內(nèi)容

import Vue from "vue"
import Vuex from "vuex"
import VuexPersistence from 'vuex-persist';
import db from './db'
Vue.use(Vuex)
//vuex 狀態(tài)持久化
const vuexLocal = new VuexPersistence({
    storage:window.localStorage
})
const store = new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    modules:{
        db
    },
    plugins:[vuexLocal.plugin]
})
export default store

db.js內(nèi)容

const db = {
    state: {
        token: '',
    },
    getters:{
        token:state => state.token
    },
    mutations: {
        // 存儲token
        setToken: (state, value) => {
            state.token = value
        }
    },
    actions: {}
}
export default db

接口封裝

import http from "../common/http"
/***********登錄注冊*************/
// 測試接口
function text(params){
    return http.get("api/Test/GetList", params)
}
//登錄 
 function Login(params) {
    return http.post("api/Login/Login", params)
}
// 獲取圖形驗(yàn)證碼
function GetValidateCode(params) {
    return http.post("api/Login/GetValidateCode", params)
}
// 獲取手機(jī)驗(yàn)證碼 注意：需要提前人機(jī)驗(yàn)證后調(diào)用 否則有被惡意刷短信的風(fēng)險(xiǎn)
function GetPhoneCode(params) {
    return http.post("api/Login/GetPhoneCode", params)
}
// 注冊 校驗(yàn)信息
function RegisterUserVerify(params) {
    return http.post("api/Login/RegisterUserVerify", params)
}
// 注冊 設(shè)置密碼 注冊用戶信息
function RegisterUserInfo(params) {
    return http.post("api/Login/RegisterUserInfo", params)
}
// 忘記密碼 驗(yàn)證姓名手機(jī)號
function ResetPasswordVerify(params) {
    return http.post("api/Login/ResetPasswordVerify", params)
}
// 忘記密碼 密碼更新
function ResetPassWord(params) {
    return http.post("api/Login/ResetPassWord", params)
}
export {
    Login,
    text,
    GetPhoneCode,
    RegisterUserVerify,
    GetValidateCode,
    ResetPasswordVerify,
    ResetPassWord,
    RegisterUserInfo
}