您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue消除Token過期時刷新頁面的重復(fù)提示問題怎么解決”,在日常操作中,相信很多人在Vue消除Token過期時刷新頁面的重復(fù)提示問題怎么解決問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Vue消除Token過期時刷新頁面的重復(fù)提示問題怎么解決”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
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ù)失?。?quot;); 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)記置1 global.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過期時,刷新頁面,只提示一次告警。
到此,關(guān)于“Vue消除Token過期時刷新頁面的重復(fù)提示問題怎么解決”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。