token過期時，刷新頁面，頁面如果加載時向后端發(fā)起多個請求，會重復(fù)告警提示，經(jīng)過處理，只提示一次告警。

  頁面長時間未操作，再刷新頁面時，第一次彈出“token失效,請重新登錄!”提示，然后跳轉(zhuǎn)到登錄頁面，接下來又彈出了n個“Token已過期”的后端返回消息提示。

  當(dāng)前頁面初始化，有多個向后端查詢系統(tǒng)參數(shù)的調(diào)用，代碼如下：

created () { // ======================================================================== // 獲取需要的系統(tǒng)參數(shù)，注意：getParameterClass方法是異步加載數(shù)據(jù)的。 // 如需要打印觀察，需要通過watch來處理 // 獲取用戶類型的參數(shù)類別 this.commonFuncs.getParameterClass(this,'user_type','userTypeList','userTypeMap'); // 獲取用戶狀態(tài)的參數(shù)類別 for(var i = 0; i < this.userStatusList.length; i++){ var item = this.userStatusList[i]; var mapKey = parseInt(item.itemKey); this.userStatusMap.set(mapKey, item); } // 獲取性別的參數(shù)類別 this.commonFuncs.getParameterClass(this,'gender','','genderMap'); // 獲取部門的參數(shù)類別 this.commonFuncs.getParameterClass(this,'department','','deptMap'); // 獲取角色的參數(shù)類別 this.commonFuncs.getParameterClass(this,'role','','roleMap'); // 查詢用戶記錄 this.queryUsers(); },

  這些請求，是axios調(diào)用，是異步執(zhí)行的，因此，刷新頁面時，這些請求幾乎立即就發(fā)出了。然后，這些請求的響應(yīng)會陸續(xù)返回。

  響應(yīng)首先被下面的response攔截器處理：

// token相關(guān)的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失效,請重新登錄!’);// 要跳轉(zhuǎn)登陸頁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) //返回接口返回的錯誤信息})

  然后再進(jìn)入請求調(diào)用處的代碼：

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(’查詢系統(tǒng)參數(shù)失敗！’); console.log(error); });

  現(xiàn)在的問題：

對應(yīng)一個請求，如果token過期，reponse攔截器首先彈出告警提示，然后，調(diào)用處又有提示：

alert(res.data.message);

這樣就重復(fù)了。

對于同時發(fā)出的多個請求，需要有標(biāo)記來記住這次token過期是否已提示，只提示一次，如已提示，就不必再提示。

3.1、消除攔截器和請求調(diào)用處對token過期的重復(fù)提示

  編寫一個公共方法，檢查是否是被攔截處理的返回碼，放于/src/common/commonFuncs.js文件中，代碼如下：

/** * 判斷是否被攔截處理的返回碼，返回true，表示被攔截 * 此方法的作用是調(diào)用處，無需處理被攔截的返回碼的錯誤提示 * @param {請求的返回碼} code */ isInterceptorCode(code){ switch (code) { case 3: //token為空 case 4: //token過期 case 5: //token不正確 case 6: //禁止訪問return true; default:break; } return false; }

  然后所有調(diào)用處，針對非成功返回的處理均改為：

if (!this.commonFuncs.isInterceptorCode(res.data.code)){ alert(res.data.message);}

  這樣，消除了攔截處理和調(diào)用處理的重復(fù)告警。

3.2、多個請求只提示一次的處理

  在全局變量文件/src/common/global.js中，增加token無效標(biāo)記，代碼如下：

//全局變量export default { // 請求成功返回碼 SucessRequstCode:0, // token無效標(biāo)記 TokenInvalidFlag : 0}

  然后，修改攔截器代碼：

// token相關(guān)的response攔截器instance.interceptors.response.use(response => { if (response) { switch (response.data.code) { case 0: //正常// 復(fù)位token無效標(biāo)記置global.TokenInvalidFlag = 0;break; case 3: //token為空 case 4: //token過期 case 5: //token不正確 localStorage.clear(); //刪除用戶信息if (global.TokenInvalidCounter == 0){ alert(’token失效,請重新登錄!’);}// token無效標(biāo)記置1global.TokenInvalidFlag = 1; // 要跳轉(zhuǎn)登陸頁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）時，進(jìn)行提示，然后設(shè)置為1（此時TokenInvalidFlag=1），后續(xù)的若干個請求的響應(yīng)，都不會在告警提示了。直到收到成功返回碼時復(fù)位為0，此時表示重新登錄成功了。

  經(jīng)測試，這樣處理達(dá)到預(yù)期效果，即token過期時，刷新頁面，只提示一次告警。

作者：阿拉伯1999 出處：http://www.cnblogs.com/alabo1999/ 本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利. 養(yǎng)成良好習(xí)慣，好文章隨手頂一下。

到此這篇關(guān)于Vue 消除Token過期時刷新頁面的重復(fù)提示的文章就介紹到這了,更多相關(guān)Vue刷新頁面的重復(fù)提示內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！