前言 項目中需要驗證登錄用戶身份是否過期，是否有許可權進行操作，所以需要根據後臺返回不同的狀態碼進行判斷。 第一次使用攔截器，文章中如有不對的地方還請各位大佬幫忙指正謝謝。 正文 axios的攔截器分為請求攔截器和響應攔截器兩種。我一般把攔截器寫在main.js里。 請求攔截器 響應攔截器 這兩種攔截 ...
前言
項目中需要驗證登錄用戶身份是否過期，是否有許可權進行操作，所以需要根據後臺返回不同的狀態碼進行判斷。
第一次使用攔截器，文章中如有不對的地方還請各位大佬幫忙指正謝謝。
正文
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，如圖所示
總結：
以上就是本文的全部內容了，希望對遇到該問題的猿們有所幫助，也希望大家多多支持本碼農，如有問題，請留言！
