快捷導(dǎo)航

關(guān)于Vue 消除Token過期時(shí)刷新頁(yè)面的重復(fù)提示問題

更新時(shí)間：2021年07月08日 09:03:31 作者：阿拉伯1999

很多朋友在token過期時(shí)刷新頁(yè)面，頁(yè)面長(zhǎng)時(shí)間未操作，再刷新頁(yè)面時(shí)，第一次彈出“token失效,請(qǐng)重新登錄!”提示，針對(duì)這個(gè)問題該怎么處理呢，下面小編給大家?guī)碓蚍治黾敖鉀Q方法，一起看看吧

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

1、問題現(xiàn)象

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

2、原因分析

當(dāng)前頁(yè)面初始化，有多個(gè)向后端查詢系統(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();
  },

這些請(qǐng)求，是axios調(diào)用，是異步執(zhí)行的，因此，刷新頁(yè)面時(shí)，這些請(qǐng)求幾乎立即就發(fā)出了。然后，這些請(qǐng)求的響應(yīng)會(huì)陸續(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失效,請(qǐng)重新登錄!');
        // 要跳轉(zhuǎn)登陸頁(yè)
        router.replace({
              path: '/login',
        });
        break;
      case 6: //禁止訪問
        // 跳到403頁(yè)面
        router.replace({
          path: '/forbidden',
        });        
        break;
      default:
        break;
    }
  }
  return response;
}, error => {
  return Promise.reject(error.response.data.message) //返回接口返回的錯(cuò)誤信息
})

然后再進(jìn)入請(qǐng)求調(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)在的問題：

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

alert(res.data.message);

這樣就重復(fù)了。

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

3、解決方案

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

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

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

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

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

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

3.2、多個(gè)請(qǐng)求只提示一次的處理

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

//全局變量

export default {
  // 請(qǐng)求成功返回碼
  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失效,請(qǐng)重新登錄!');
        }
        // token無效標(biāo)記置1
        global.TokenInvalidFlag = 1;
            
        // 要跳轉(zhuǎn)登陸頁(yè)
        router.replace({
              path: '/login',
        });
        break;
      case 6: //禁止訪問
        // 跳到403頁(yè)面
        router.replace({
          path: '/forbidden',
        });        
        break;
      default:
        break;
    }
  }
  return response;
}, error => {
  return Promise.reject(error.response.data.message) //返回接口返回的錯(cuò)誤信息
})

即在第一次收到token過期消息（此時(shí)TokenInvalidFlag=0）時(shí)，進(jìn)行提示，然后設(shè)置為1（此時(shí)TokenInvalidFlag=1），后續(xù)的若干個(gè)請(qǐng)求的響應(yīng)，都不會(huì)在告警提示了。直到收到成功返回碼時(shí)復(fù)位為0，此時(shí)表示重新登錄成功了。

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

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

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

您可能感興趣的文章: