Vue 消除Token過期時重新整理頁面的重複提示

阿拉伯1999發表於2021-07-07
Vue

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);
    });

  現在的問題：

  1. 對應一個請求，如果token過期，reponse攔截器首先彈出告警提示，然後，呼叫處又有提示：

    alert(res.data.message);

    這樣就重複了。

  2. 對於同時發出的多個請求，需要有標記來記住這次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無效標記置1
          global.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過期時，重新整理頁面，只提示一次告警。

相關文章