1、問題現象
??頁面長時間未操作，再重繪頁面時，第一次彈出“token失效,請重新登錄!”提示，然后跳轉到登錄頁面，接下來又彈出了n個“Token已過期”的后端回傳訊息提示，
2、原因分析
??當前頁面初始化，有多個向后端查詢系統引數的呼叫，代碼如下：
created () {
// ========================================================================
// 獲取需要的系統引數，注意：getParameterClass方法是異步加載資料的，
// 如需要列印觀察，需要通過watch來處理
// 獲取用戶型別的引數類別
this.commonFuncs.getParameterClass(this,"user_type","userTypeList","userTypeMap");
// 獲取用戶狀態的引數類別
for(var i = 0; i < this.userStatusList.length; i++){
var item = this.userStatusList[i];
var mapKey = parseInt(item.itemKey);
this.userStatusMap.set(mapKey, item);
}
// 獲取性別的引數類別
this.commonFuncs.getParameterClass(this,"gender","","genderMap");
// 獲取部門的引數類別
this.commonFuncs.getParameterClass(this,"department","","deptMap");
// 獲取角色的引數類別
this.commonFuncs.getParameterClass(this,"role","","roleMap");
// 查詢用戶記錄
this.queryUsers();
},
??這些請求，是axios呼叫，是異步執行的，因此，重繪頁面時，這些請求幾乎立即就發出了，然后，這些請求的回應會陸續回傳，
??回應首先被下面的response攔截器處理：
// token相關的response攔截器
instance.interceptors.response.use(response => {
if (response) {
switch (response.data.code) {
case 3: //token為空
case 4: //token過期
case 5: //token不正確
localStorage.clear(); //洗掉用戶資訊
alert('token失效,請重新登錄!');
// 要跳轉登陸頁
router.replace({
path: '/login',
});
break;
case 6: //禁止訪問
// 跳到403頁面
router.replace({
path: '/forbidden',
});
break;
default:
break;
}
}
return response;
}, error => {
return Promise.reject(error.response.data.message) //回傳介面回傳的錯誤資訊
})
??然后再進入請求呼叫處的代碼：
this.instance.getParameterClass(
this.$baseUrl, {"classKey" : classKey}
).then(res => {
//console.log(res.data);
if (res.data.code == parent.global.SucessRequstCode){
// 如果查詢成功
// 成功的處理代碼...
}else{
alert(res.data.message);
}
}).catch(error => {
//alert('查詢系統引數失敗！');
console.log(error);
});
??現在的問題：
-
對應一個請求，如果token過期，reponse攔截器首先彈出告警提示，然后，呼叫處又有提示：
alert(res.data.message);這樣就重復了，
-
對于同時發出的多個請求，需要有標記來記住這次token過期是否已提示，只提示一次，如已提示，就不必再提示，
3、解決方案
3.1、消除攔截器和請求呼叫處對token過期的重復提示
??撰寫一個公共方法，檢查是否是被攔截處理的回傳碼，放于/src/common/commonFuncs.js檔案中，代碼如下：
/**
* 判斷是否被攔截處理的回傳碼，回傳true，表示被攔截
* 此方法的作用是呼叫處，無需處理被攔截的回傳碼的錯誤提示
* @param {請求的回傳碼} code
*/
isInterceptorCode(code){
switch (code) {
case 3: //token為空
case 4: //token過期
case 5: //token不正確
case 6: //禁止訪問
return true;
default:
break;
}
return false;
}
??然后所有呼叫處，針對非成功回傳的處理均改為：
if (!this.commonFuncs.isInterceptorCode(res.data.code)){
alert(res.data.message);
}
??這樣，消除了攔截處理和呼叫處理的重復告警，
3.2、多個請求只提示一次的處理
??在全域變數檔案/src/common/global.js中，增加token無效標記，代碼如下：
//全域變數
export default {
// 請求成功回傳碼
SucessRequstCode:0,
// token無效標記
TokenInvalidFlag : 0
}
??然后，修改攔截器代碼：
// token相關的response攔截器
instance.interceptors.response.use(response => {
if (response) {
switch (response.data.code) {
case 0: //正常
// 復位token無效標記置
global.TokenInvalidFlag = 0;
break;
case 3: //token為空
case 4: //token過期
case 5: //token不正確
localStorage.clear(); //洗掉用戶資訊
if (global.TokenInvalidCounter == 0){
alert('token失效,請重新登錄!');
}
// token無效標記置1
global.TokenInvalidFlag = 1;
// 要跳轉登陸頁
router.replace({
path: '/login',
});
break;
case 6: //禁止訪問
// 跳到403頁面
router.replace({
path: '/forbidden',
});
break;
default:
break;
}
}
return response;
}, error => {
return Promise.reject(error.response.data.message) //回傳介面回傳的錯誤資訊
})
??即在第一次收到token過期訊息（此時TokenInvalidFlag=0）時，進行提示，然后設定為1（此時TokenInvalidFlag=1），后續的若干個請求的回應，都不會在告警提示了，直到收到成功回傳碼時復位為0，此時表示重新登錄成功了，
??經測驗，這樣處理達到預期效果，即token過期時，重繪頁面，只提示一次告警，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288990.html
標籤：JavaScript