鍍金池/ 問答/HTML/ vue.js 一個(gè)頁(yè)面多個(gè)請(qǐng)求，如何處理“未登錄”多次提示？

vue.js 一個(gè)頁(yè)面多個(gè)請(qǐng)求，如何處理“未登錄”多次提示？

在vue響應(yīng)攔截器里面寫了這么一些代碼：

service.interceptors.response.use(
  response =>{
    
    const res = response.data;
    const code = parseInt(res.code);
    var errTip = '未知錯(cuò)誤';
    switch(code){
      case 20000:errTip = '';break;
      case 20003:errTip = "用戶未登錄";break;
      
      default: 
      
      break;
    }

    if(errTip){
      alert(errTip + '!');
      if(code == 20003){
        window.location.href = "/login"
      }
      return Promise.reject(new Error(errTip));
    }

    return response;
  } ,
  error => {
    return Promise.reject(error);//處理服務(wù)器異常錯(cuò)誤
  }
)

如果用戶請(qǐng)求一個(gè)頁(yè)面，該頁(yè)面存在多個(gè)請(qǐng)求，此時(shí)都會(huì)返回 20003，所以會(huì)提示多次“用戶未登錄”，該怎么處理呢？

回答
編輯回答
別硬撐

在vuex 或者 全局域 加一個(gè) 鎖。

這里用全局域來做演示比較方便。實(shí)際環(huán)境中最好使用 vuex

window.tipLock = false;
service.interceptors.response.use(
  response =>{
    
    const res = response.data;
    const code = parseInt(res.code);
    var errTip = '未知錯(cuò)誤';
    switch(code){
      case 20000:errTip = '';break;
      case 20003:errTip = "用戶未登錄";break;
      
      default: 
      
      break;
    }

    if(errTip){
      if(!window.tipLock){
          window.tipLock = true;
          alert(errTip + '!');
          window.tipLock = false; //這句如果是第三方的alert 則寫在回調(diào)中
      }
      if(code == 20003){
        window.location.href = "/login"
      }
      return Promise.reject(new Error(errTip));
    }

    return response;
  } ,
  error => {
    return Promise.reject(error);//處理服務(wù)器異常錯(cuò)誤
  }
)
2018年7月7日 22:11
編輯回答
氕氘氚

檢測(cè)到未登錄之后直接跳轉(zhuǎn)到登錄頁(yè)面，后面的請(qǐng)求就自動(dòng)中斷了，不會(huì)再繼續(xù)請(qǐng)求

2017年7月17日 02:08