token过期时，刷新页面，页面如果加载时向后端发起多个请求，会重复告警提示，经过处理，只提示一次告警��

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

  现在的问题��

对应一个请求，如果token过期，reponse拦截器首先弹出告警提示，然后，调用处又有提示��

alert(res.data.message);

这样就重复了��

对于同时发出的多个请求，需要有标记来记住这次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不正��    
        localStorage.clear();     //删除用户信息
        if (global.TokenInvalidCounter == 0){
          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过期时，刷新页面，只提示一次告警��

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容��

猜你喜欢

• 用vue怎样做添加购物车有抛物线显示的效果？

  经常浏览购物网站的朋友可能会看到这样的一个效果，就是添加商品到购物车的时候，会有抛物线这样的效果，那么这个具体是怎样做呢？接下来小编就带大家来了解一下��

• 用Cocos制作一个射击游戏的过程及代码是什��

  这篇文章主要介绍了CocosCreator制作射击游戏，各个方面都讲的比较详细，希望同学们自己动手试一��

• JS中怎么实现随机生成验证码并提交验证

  这篇文章主要为大家详细介绍了JavaScript实现随机生成验证码及校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一��

• 怎样jquery用写一个年月日的时间选择器？

  这篇文章给大家分享的是有关jquery实现年月日的时间选择器的代码，小编觉得挺实用的，在很多常见都能使用到，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧��

• JavaScript反转数组的方法有什么，代码怎样写？

  这篇文章给大家分享的是JavaScript反转数组的方法。下文分享了使用for循环和push()方法和reverse()方法这两种，文中的示例代码有一定的参考价值，有需要的朋友可以了解看看，接下来就跟随小编一起学习一下吧��