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攔截器首先彈出告警提示，然后，調用處又有提示,這樣就重復了。

對于同時發出的多個請求，需要有標記來記住這次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不正確 if (global.TokenInvalidFlag == 0){//刪除用戶信息localStorage.clear(); // 告警提示 alert('token失效,請重新登錄!');// token無效標記置1global.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過期時，刷新頁面，只提示一次告警。

總結

以上是生活随笔為你收集整理的Vue 消除Token过期时刷新页面的重复提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。