[Bug]: 页面长时间不操作,后台token失效返回401时,页面跳转login页失败会卡在loading页面状态
软件版本
1.3.14
运行环境
Windows (64)
运行架构
x86
重现步骤
前后端正常状态下登录,将页面停留在一个登录后页面,此时关闭后端服务并重启,使后端token清空为取不到状态,此时刷新前端页面,页面会在跳转登录页面时卡住,调试信息为 GetUserInfo返回401,Axios请求失败后尝试跳转登录页时卡住为loading页
期望的结果是什么?
可以正常返回到登录页面
实际的结果是什么?
卡住为loading页面
日志记录(可选)
补充说明(可选)
用的是静态路由还是动态路由?看着像路由没有返回,没找到 login 页面
用的静态路由,不是路由没找到,就是当刷新时组件装载过程中由于之前localStore中的客户登录信息都存在,正常需要服务器返回结果,但服务端因为token过期或已经不存在所以返回401后,客户端在error处理中要去跳转,但此时应用还在始化中,所以卡了
卡住后,如果再次刷新,就可以正常跳转到login页了,因为这时main执行完后应用已经初始化完成,路由组件可以正常使用了,就没问题了
用的静态路由,不是路由没找到,就是当刷新时组件装载过程中由于之前localStore中的客户登录信息都存在,正常需要服务器返回结果,但服务端因为token过期或已经不存在所以返回401后,客户端在error处理中要去跳转,但此时应用还在始化中,所以卡了
卡住后,如果再次刷新,就可以正常跳转到login页了,因为这时main执行完后应用已经初始化完成,路由组件可以正常使用了,就没问题了
感谢反馈,我抽空再尝试复现一下
请问这个问题处理好了吗?或者有什么解决办法或解决思路吗?
提供个复现问题的仓库代码
我也遇到这个问题, 我这是必现, 不过我在项目中改了不少东西, 我一直以为是我自己改出来的
不需要复现问题的代码,前端代码不用动,想重现问题就把后端的token清掉,让后端返回401,这样前端刷新页面初始化vue时就可以复现,问题的原因就在于初始化没有完成时axios中error处理401要router跳转时,这时router还没有完成
用的静态路由,不是路由没找到,就是当刷新时组件装载过程中由于之前localStore中的客户登录信息都存在,正常需要服务器返回结果,但服务端因为token过期或已经不存在所以返回401后,客户端在error处理中要去跳转,但此时应用还在始化中,所以卡了
卡住后,如果再次刷新,就可以正常跳转到login页了,因为这时main执行完后应用已经初始化完成,路由组件可以正常使用了,就没问题了
我也遇到这个问题, 我这是必现, 不过我在项目中改了不少东西, 我一直以为是我自己改出来的
@litecy 简单的,你把 main.ts 里的 await setupRouter(app); 套个 try-catch就可以了
我也碰到这个问题了,我在axios处理401之后手动加了一个location.reload()
setupRouter
不太行, try catch 之后还是一样的问题