Vue 消除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拦截器首先弹出告警提示,然后,调用处又有提示,这样就重复了。
对于同时发出的多个请求,需要有标记来记住这次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不正确 if (global.TokenInvalidFlag == 0){//删除用户信息localStorage.clear(); // 告警提示 alert('token失效,请重新登录!');// token无效标记置1global.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过期时刷新页面的重复提示相关推荐
- java app token 失效_请求时token过期自动刷新token操作
1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...
- Vue build打包之后,刷新页面出现404解决方案
Vue build打包之后,刷新页面出现404,HTML5 History 模式 原因分析: vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于 ...
- vue项目token过期
问题:vue项目token过期,后端会在token过期之前两秒钟在控制台的返给前端一个新的authorization(token) token过期分析:1.jwt过期(其中一个过期)===> 后 ...
- java token 有效期_RxJava2 实战知识梳理(14) - 在 token 过期时,刷新过期 token 并重新发起请求...
RxJava2 实战系列文章 一.应用背景 首先要感谢简友 楠柯壹梦 提供的实战案例,这篇文章的例子是基于他提出的需要在token失效时,刷新token并重新请求接口的应用场景所想到的解决方案.如果大 ...
- VUE 返回上一页 不刷新页面、重复进入同一页面created重复执行、每次进入页面时都执行created、vue单页面多路由,前进刷新,返回不刷新
每次进入页面时都执行created.前进刷新,返回不刷新 思路: 利用 keep-alive与vue-router配合使用 ,判断哪些页面需要每次进入刷新,哪些页面不需要每次进入刷新: keepAli ...
- java 后台自动刷新请求_请求时token过期自动刷新token
1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...
- python token过期_请求时token过期自动刷新token
1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...
- php token 自动过期,请求时token过期自动刷新token
1.在开发时这例随时幻近我些如机兼灯近我些如机兼灯过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次 ...
- vue 添加完数据后刷新页面_页面刷新vuex数据消失
1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...
最新文章
- 【Qt】qss样式表之:自定义属性实现动态切换样式
- SQL Server 数据库基础编程
- Docker Java+Tomcat 环境搭建
- 开源项目葫芦藤:IdentityServer4的实现及其运用
- TypeScript类型推论(Type Inference)
- 【Python】Python一些有趣而基础的知识(结合Java进行对比)
- mysql 指定tcpip连接数_tcp ip连接数据库
- SpringCloud工作笔记074---Idea2018 1.6发现不支持@Slf4j,@Getter ,@Setter注解
- 苹果Mac系统无法输入密码的解决办法
- 映像劫持与反劫持技术
- AI CC2019安装
- 人工智能(AI)经历了怎样的发展历程?
- STM32 外部晶振电路设计和匹配
- 组合(Combination)
- 波士顿大学计算机与传媒专业,波士顿大学传媒专业排名如何?
- LATEX--页边距设置
- ECL、LVDS和CML电平
- 一个前端工程师的基本修养
- ROCBOSS开源免费微社区轻论坛类源码
- oracle教程目录(我要自学网)
热门文章
- python怎么连接数据库_python3.x怎么连接mysql数据库
- 我用自己创造的深度学习框架进入腾讯,爽!
- 电子徽章:融创意、疯狂与电子设计中
- 内建模块_月隐学python第14课
- ROracle Mysql_ROracle包查询数据库中文乱码
- angular9获取id_Angular2获取点击的元素ID
- libsvm工具箱会和matlab,MATLAB实现多分类和libsvm工具箱的安装使用详解
- linux动态链接库软件,Linux 动态链接库
- asp.net 调用本地php,.NET_Asp.net获取服务器指定文件夹目录文件并提供下载的方法,本文实例讲述了Asp.net获取服务 - phpStudy...
- 学计算机的事物多线程看不懂,看不懂CPU?学会看CPU只需明白这5点,如此简单!...