vue axios 攔截器

前言

項目中需要驗證登錄用戶身份是否過期，是否有權限進行操作，所以需要根據后台返回不同的狀態碼進行判斷。

第一次使用攔截器，文章中如有不對的地方還請各位大佬幫忙指正謝謝。

正文

axios的攔截器分為請求攔截器和響應攔截器兩種。
我一般把攔截器寫在main.js里。

mian.js
//axios請求
import Axios from "axios";
Vue.prototype.$axios = Axios; 

請求攔截器

axios.interceptors.request.use(
    function (config) {
        // 在發送請求之前做些什么，例如加入token
        .......
        return config;
    },
    function (error) {
        // 對請求錯誤做些什么
        return Promise.reject(error);
    }
)

響應攔截器

axios.interceptors.response.use(
    function (response) {
        // 在接收響應做些什么，例如跳轉到登錄頁
        ......
        return response;
    }, 
    function (error) {
        // 對響應錯誤做點什么
        return Promise.reject(error);
     }
)

這兩種攔截器中我只用了響應攔截器，現在我就來說說我是如何使用的。

首先說明一下，這里的狀態碼不是status，而是后台包在data中的（無論是成功還是失敗），返回409表示用戶賬戶過期，退到登錄頁，返回302表示沒有權限，返回-1則是系統錯誤

// 攔截器，當返回狀態碼是409，踢出到登錄頁面，但所有請求都是異步的，如果在某個地方有多個請求，攔截器就會攔截多遍，彈框也會彈多次，用戶體驗差，
// 所以當第一次攔截成功后，后面就不需要攔截，所以在這寫了個操作，
// 操作：如果第一次攔截成功，在sessionStorage中存儲個標識，然后下次攔截進來時判斷有沒有這個標識，如果有，則不進行攔截操作，當沒有攔截時將這個標識從sessionStorage中刪除
Axios.interceptors.response.use(
　　// 成功
    function(response) {
        // 返回
        // return response; 
        // alert(response.status) //成功的Status
        if (response.data.code == "409"){
　　　　　　　var kickOut = sessionStorage.getItem("kickOut");
　　　　　　　if (kickOut == "1") {
　　　　　　　　　return;
　　　　　　　}
　　　　　　　sessionStorage.setItem("kickOut", "1");
　　　　　　　router.push("/");
　　　　　　　ElementUI.MessageBox(
　　　　　　　　　"賬號已經在其他地方登錄，請重新登錄！",
　　　　　　　　　"警告", 
　　　　　　　　　{
　　　　　　　　　　　confirmButtonText: "確定"
　　　　　　　　　}
　　　　　　　)
　　　　　} else if(response.data.code == "302"){
　　　　　　　　ElementUI.Message({
        　　　　　message: '沒有權限!',
　　　　　　　　　 type:'warning' 
    　　　　　 });
　　　　  }else {
　　　　　　　　sessionStorage.removeItem("kickOut");
　　　　　　　　return response;
　　　　　}
　　　},
　　　// 失敗
　　　function(error) {
        // alert(error.response.status) //失敗的Status
        if (error.response.data.code == "409") {
            ......  //和成功中的一樣,可以封裝成一個函數在這調用
        }else if(error.response.data.code == "-1"){
　　　　 　　ElementUI.Message({
        　　　　　message: '系統錯誤!',
　　　　　　　　　 type:'warning' 
    　　　　})
        }
    }
);

 注意：

　　后台返回的status狀態碼302攔截不到，是因為瀏覽器自行根據redirectUrl進行了跳轉 ，我這是后台寫了個302接口，返回值中給我放的302，如圖所示　　　　　　

　　　　　　　　

 總結：

　　以上就是本文的全部內容了，希望對遇到該問題的猿們有所幫助，也希望大家多多支持本碼農，如有問題，請留言！