本文介绍了在Vue单页面应用中遇到的登录过期问题及其解决方案。作者首先描述了问题背景，即登录过期后，页面会多次提示重新登录。通过分析后发现，这是由于页面加载时调用了多个接口，后端返回了特定的状态码指示登录过期。作者提出了两个解决方案：一是直接跳转到登录页面，但此方案未能解决根本问题；二是自定义弹窗，通过回调函数控制登录跳转。最后，作者实现了使用Vue属性绑定的弹窗，并通过变量控制避免了多次弹出，成功解决了登录过期的提示问题。
问题背景
最近做的内部管理系统中有一个bug为登陆过期的时候点击页面出现多次登陆过期请重新登录
。
找原因
页面加载调用多个接口，（登陆过期，请重新登陆）这个信息是后端返回的,直接上代码
在axios上封装了一封promise,登陆过期的状态码为300，是我最下面标注的一个圆圈。
解决办法
初次想法
当登陆过期的时候直接跳转到登陆页面，不把错误信息给alert出来，这个方法直接被老大给否决了，这样只能解决表面问题，并不能解决根本。然后想以前做的项目，以前的前后端不分离的有page_load,mvc有路由跳转，这个单页面应用路由的话用路由守卫可以做到，单页面应用这个怎么做呢，继续想解决办法
第二个想法
不用alert，自己封装一个弹框，设置一个callback函数，当点击确定的时候，跳转到登陆页面，这个是可行的。
编写登陆弹框
先看页面
关键的几个点我都用红线标注出来了看js部分的内容
这里关键的部分是把 al
最低0.47元/天 解锁文章
扫一扫
2273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
