關於Vue 消除Token過期時重新整理頁面的重複提示問題
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" : classKeyFYjOvK}
).then(res =&g客棧t; {
//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.檔案中,程式碼如下:
/** * 判斷是否被攔截處理的返回碼,返回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: '/www.cppcns.comforbidden',error => {
return Promise.reject(error.response.data.message) //返回介面返回的錯誤資訊
})
即在第一次收到token過期訊息(此時TokenInvalidFlag=0)時,進行提示,然後設定為1(此時TokenInvalidFlag=1),後續的若干個請求的響應,都不會在告警提示了。直到收到成功返回碼時復位為0,此時表示重新登入成功了。
經測試,這樣處理達到預期效果,即token過期時,重新整理頁面,只提示一次告警。
作者:阿拉伯1999 出處:http://www.cnblogs.com/alabo1999/ 本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利. 養成良好習慣,好文章隨手頂一下。
到此這篇關於 消除Token過期時重新整理頁面的重複提示的文章就介紹到這了,更多相關Vue重新整理頁面的重複提示內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!