Vue 消除Token過期時重新整理頁面的重複提示
阿新 • • 發佈:2021-07-07
token過期時,重新整理頁面,頁面如果載入時向後端發起多個請求,會重複告警提示,經過處理,只提示一次告警。
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過期時,重新整理頁面,只提示一次告警。
作者:阿拉伯1999 出處:http://www.cnblogs.com/alabo1999/ 本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利. 養成良好習慣,好文章隨手頂一下。