后端:
用户附带 Bearer auth 认证 token 去申请接口,而后后端判断接口是否过期?如果过期了,那么在返回信息的响应头 authorization 中增加一个新 token,并容许了过期 token 的最初一个申请,之后再用这个过期 token 拜访接口就不会再返回新 token 了,因为新 token 曾经返回过一次了。
为了更好的测试,咱们将后端 jwt 的过期工夫设置为 1 分钟,则一分钟过期一次,而后刷新 token,直到 24 小时后刷新工夫过期,须要从新登录。
前端:
步骤:
- 登录时,咱们申请 login 接口,而后接口返回给咱们登录胜利,以及 token
- 而后将 token 保留在 vuex 与 LocalStorage,进入后盾首页
- 进入后盾首页之后,咱们首先须要获取的是用户信息(在后盾首页 index 组件中申请),还有对应的用户权限菜单(在 router 拦截器中申请)、以及后盾首页须要显示的数据(在后盾首页 index 组件中申请)
测试:
因为 token 1 分钟 过期,咱们将在登录胜利进入后盾首页之后进行操作期待 1 分钟
这个时候咱们刷新页面。
过程:
他会同时执行 3 个申请,因为是异步申请,再者因为是不同组件,没有应用 async/await,所以这 3 个申请中,任意一个第一工夫发出请求的,会在响应头中失去新的 token,而后还没有来得及在 vuex 及 LocalStorage 中保留,第二个申请就带着 Vuex/LocalStorage 中的就 token 拜访了,而后失去后端返回的 token 生效及谬误状态码
后果:
申请回来之后响应拦截器发现此 token 生效了,而后就间接跳转到登录页面,删除了 vuex/LocalStorage 中的所有信息,实际上在第一个申请收回的时候,新的 token 曾经返回了,只不过是还没有保留呢,第二个申请就带着旧 token 拜访了。
要害代码截图:
axios 封装:
路由拦截器:
index.vue
刷新页面时申请:
发问:
这种状况我尝试过很多办法,其中很多人都提出来应用监听,监听什么呢?token 始终都是存在的,不会为空,如果监听 token 时候无效,那么又多了一次申请。
如果说去别的页面也会遇到这种问题,比方在用户核心页面,刷新页面会同时收回用户列表申请和我的信息申请及菜单申请,也会呈现这种问题。
如果解决这种问题,是前端解决还是后端解决?后端这样设计 api 是因为要实现 token 的单点登录,一个 token 只能一个人应用,过期的 token 也不会再刷新。
我切实想不到一个好的解决办法,心愿帅气的前端大佬们帮我指点迷津,我将感激不尽。