vue.js 一个页面多个请求,如何处理“未登录”多次提示?

在vue响应拦截器里面写了这么一些代码:

service.interceptors.response.use(
  response =>{
    
    const res = response.data;
    const code = parseInt(res.code);
    var errTip = '未知错误';
    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);//处理服务器异常错误
  }
)

如果用户请求一个页面,该页面存在多个请求,此时都会返回 20003,所以会提示多次“用户未登录”,该怎么处理呢?

回答:

在vuex 或者 全局域 加一个 锁。

这里用全局域来做演示比较方便。实际环境中最好使用 vuex

window.tipLock = false;
service.interceptors.response.use(
  response =>{
    
    const res = response.data;
    const code = parseInt(res.code);
    var errTip = '未知错误';
    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 则写在回调中
      }
      if(code == 20003){
        window.location.href = "/login"
      }
      return Promise.reject(new Error(errTip));
    }

    return response;
  } ,
  error => {
    return Promise.reject(error);//处理服务器异常错误
  }
)

回答:

检测到未登录之后直接跳转到登录页面,后面的请求就自动中断了,不会再继续请求

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注