vue token过期处理,vue无痛刷新token
很多朋友在令牌过期的时候刷新页面，页面很久没人操作了。再次刷新页面时，“令牌无效，请重新登录！”第一次弹出提示，这个问题怎么处理？下面小编就给大家带来原因分析和解决方法。让我们看一看。
当令牌过期时，刷新页面。如果在页面加载时有多个请求发送到后端，将会重复报警提示。处理后，只会提示一个报警。
1、问题现象
页面长时间不操作，再次刷新页面时“token无效，请重新登录！”第一次弹出提示，然后跳转到登录页面，接着是N次后端返回“令牌已过期”的消息提示。
2、原因分析
当前页面初始化，有多个调用查询后端系统参数。代码如下：
已创建(){
//========================================================================
//获取所需的系统参数。注意：getParameterClass方法异步加载数据。
//如果需要打印观测，需要通过watch处理。
//获取用户类型的参数类别
this . common funcs . getparameter class(this， user_type ， userTypeList ， user type map )；
//获取用户状态的参数类别
for(var I=0；I this . userstatuslist . length；i ){
var item=this . userstatuslist[I]；
var mapKey=parse int(item . item key)；
this.userStatusMap.set(mapKey，item)；
}
//获取性别的参数类别
this . common funcs . getparameter class(this， gender ，， gender map )；
//获取部门的参数类别
this . common funcs . getparameter class(this， department ，， dept map )；
//获取角色的参数类别
this . common funcs . getparameter class(this， role ，， role map )；
//查询用户记录
this . queryusers()；
},
这些请求是axios调用，异步执行，因此当页面刷新时，这些请求几乎是立即发出的。然后，对这些请求的响应将被一个接一个地返回。
响应首先由以下响应拦截器处理：
//与令牌相关的响应拦截器
instance . interceptors . response . use(response={
如果(响应){
switch (response.data.code) {
3://令牌为空
情况4://令牌过期
5://令牌不正确
local storage . clear()；//删除用户信息
Alert(令牌无效，请重新登录！);
//跳转到登录页面
router.replace({
路径：“/login”，
});
打破；
6://禁止访问
//跳到第403页
router.replace({
路径：“/禁止”，
});
打破；
默认值：
打破；
}
}
返回响应；
}，错误={
return promise . reject(error . response . data . message)//返回接口返回的错误信息
})
然后输入调用请求的代码：
this . instance . getparameterclass(
这个。$baseUrl，{classKey : classKey}
).然后(res={
//console . log(RES . data)；
if(RES . data . code==parent . global . successrequstcode){
//如果查询成功
//成功处理代码.
}否则{
alert(RES . data . message)；
}
}).catch(错误={
//alert(查询系统参数失败！);
console.log(错误)；
});
现在的问题是：
对应一个请求，如果令牌过期，响应拦截器会先弹出一个报警提示，然后调用处会有提示：
alert(RES . data . message)；
如此反复。
对于同时发送的多个请求，需要有一个标记来记住令牌是否过期，只提示一次。如果有，就不需要再提示了。
3、解决方案
3.1.消除拦截器和请求调用处令牌过期的重复提示。
写一个公共方法，检查是否是拦截的返回代码，放在/src/common/commonFuncs.js文件中。代码如下：
/**
*返回代码来判断是否被拦截，返回true，表示被拦截
*这个方法的作用是调用的地方不处理拦截的返回代码的错误提示。
* @ param {请求的返回代码}代码
*/
isInterceptorCode(代码){
开关(代码){
3://令牌为空
情况4://令牌过期
5://令牌不正确
6://禁止访问
返回true
默认值：
打破；
}
返回false
}
然后，在所有呼叫中，对不成功退货的处理将更改为：
如果(！this . common funcs . is interceptorcode(RES . data . code)){
alert(RES . data . message)；
}
这样就消除了拦截处理和呼叫处理的重复告警。
3.2.多个请求的处理只提示一次。
在全局变量文件/src/common/global.js中，使用以下代码添加一个无效标记：
//全局变量
导出默认值{
//请求成功返回代码
成功请求代码：0，
//无效的标记
TokenInvalidFlag : 0
}
然后，修改拦截器代码：
//与令牌相关的响应拦截器
instance . interceptors . response . use(response={
如果(响应){
switch (response.data.code) {
0://正常
//重置无效令牌标志。
全球。TokenInvalidFlag=0；
打破；
3://令牌为空
情况4://令牌过期
5://令牌不正确
local storage . clear()；//删除用户信息
如果(全局。TokenInvalidCounter==0){
Alert(令牌无效，请重新登录！);
}
//无效令牌标志设置为1。
全球。TokenInvalidFlag=1；
//跳转到登录页面
router.replace({
路径：“/login”，
});
打破；
6://禁止访问
//跳到第403页
router.replace({
路径：“/禁止”，
});
打破；
默认值：
打破；
}
}
返回响应；
}，错误={
return promise . reject(error . response . data . message)//返回接口返回的错误信息
})
即第一次收到令牌过期消息时(此时TokenInvalidFlag=0)会给出提示，之后会置1(此时TokenInvalidFlag=1)，后续几次请求的响应都不会在告警中提示。它将被重置为0，直到收到成功的返回代码，这表示登录成功。
经过测试，这种处理达到了预期的效果，即当令牌过期时，页面会刷新，只报警一次。
作者：阿拉伯语1999来源：http://www.cnblogs.com/alabo1999/.本文版权归作者和博客园所有。欢迎转载，但未经作者同意，必须保留此声明，并在文章页面显著位置给出原文链接，否则保留追究法律责任的权利。养成一个好习惯，好文章随你发。
这就是这篇关于Vue消除令牌过期时刷新页面的重复提示的文章。更多相关Vue刷新页面的重复提示内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。