Vue消除Token过期时刷新页面的重复提示问题怎么解决
这篇文章主要介绍“Vue消除Token过期时刷新页面的重复提示问题怎么解决”，在日常操作中，相信很多人在Vue消除Token过期时刷新页面的重复提示问题怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue消除Token过期时刷新页面的重复提示问题怎么解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联公司：从2013年开始为各行业开拓出企业自己的“网站建设”服务，为上千家公司企业提供了专业的做网站、网站制作、网页设计和网站推广服务， 按需网站开发由设计师亲自精心设计，设计的效果完全按照客户的要求，并适当的提出合理的建议，拥有的视觉效果，策划师分析客户的同行竞争对手，根据客户的实际情况给出合理的网站构架，制作客户同行业具有领先地位的。
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过期时，刷新页面，只提示一次告警。
到此，关于“Vue消除Token过期时刷新页面的重复提示问题怎么解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
分享文章：Vue消除Token过期时刷新页面的重复提示问题怎么解决
路径分享：http://myzitong.com/article/goejss.html