vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
vue请求token无效
关于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); });
现在的问题:
对应一个请求,如果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过期时,刷新页面,只提示一次告警。
作者:阿拉伯1999 出处:http://www.cnblogs.com/alabo1999/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 养成良好习惯,好文章随手顶一下。
到此这篇关于Vue 消除Token过期时刷新页面的重复提示的文章就介绍到这了,更多相关Vue刷新页面的重复提示内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- vue验证码(vue_drf实现短信验证码)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue统计代码行数(vue实现计数器简单制作)
- vue各种模块(一篇文章学会Vue中间件管道)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue验证码怎么用(vue验证码组件使用方法详解)
- 详解从vue的组件传值着手观察者模式(详解从vue的组件传值着手观察者模式)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue购物车简单项目(vue实现简单购物车案例)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
热门推荐
- css中id和类的区别(CSS新增的:where和:is伪类函数是什么)
- 宝塔mysql怎么设置优化(宝塔面板mysql内存占用高如何优化)
- dedecms标签工具(开启DedeCMS软件源码及分类信息采集功能的方法)
- 查看云服务器宽带(云服务器如何测试宽带)
- php获取网页内容的几种方法(PHP实现的文件浏览器功能简单示例)
- python编程ai人工智能(AI领域都在用Python即将被淘汰?网友预测未来的编程语言不会是TA)
- treeview绑定xml
- sql脚本编写计划任务(使用 SQL 语句实现一个年会抽奖程序的代码)
- python符串操作教程(Python3.5运算符操作实例详解)
- dedecms兼容模式(DedeCMS 验证码不正确的解决方法php配置问题)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9