Vue 消除Token过期时刷新页面的重复提示

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

  现在的问题：

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拦截器......
原文转载：http://www.shaoqun.com/a/853313.html
跨境电商：https://www.ikjzd.com/
网上1号店：https://www.ikjzd.com/w/2263
 
crowd：https://www.ikjzd.com/w/880
 
克雷格：https://www.ikjzd.com/w/194
 
token过期时，刷新页面，页面如果加载时向后端发起多个请求，会重复告警提示，经过处理，只提示一次告警。1、问题现象  页面长时间未操作，再刷新页面时，第一次弹出"token失效,请重新登录!"提示，然后跳转到登录页面，接下来又弹出了n个"Token已过期"的后端返回消息提示。2、原因分析  当前页面初始化，有多个向后端查询系统参数的调用，代码如下：created(){//============
网络星期一：https://www.ikjzd.com/w/80
注意！Shopee台湾未出单处理期限缩短！：https://www.ikjzd.com/articles/106991
中国与阿拉伯将继续加强跨境电商合作：https://www.ikjzd.com/articles/106993
每天分析运营数据的你，关心过时间成本吗？：https://www.ikjzd.com/articles/106994
图文实操：手把手教你在Craigslist寻找测评人！：https://www.ikjzd.com/articles/106995
女人喜欢男人㖭 女人喜欢被㖭是什么感觉：http://www.30bags.com/m/a/249812.html
把车开到没人的地方做 男朋友在车里㖭我高潮：http://www.30bags.com/m/a/249698.html
学长将我抱到小树林要了我 在学校与学长做太爽了：http://www.30bags.com/m/a/249752.html
小说:美女消失了，他过了很久才知道自己被美女骗了：http://lady.shaoqun.com/a/407853.html
《职场小说》西城碎梦第十一章野外户外：http://lady.shaoqun.com/a/407854.html
宁波方特东方欲晓在哪里，怎么走？：http://www.30bags.com/a/478645.html
宁波方特东方欲晓门票2021年7月价格：http://www.30bags.com/a/478646.html