Token无感刷新技术方案

Token无感刷新技术方案

1.背景

用户登录态过期导致用户需要重新登录操作，体验感差，同时在表单提交页面导致用户需要重新提交表单。

2.理论

1.前置条件：应用需要有一个机制来定期检查Token的有效期，以及在Token接近过期时自动发起刷新请求。
2.后端支持：后端服务需要提供一个Token刷新接口，接收旧Token并验证其有效性，然后返回一个新的、有效期较长的Token。通常，JWT不支持直接刷新，需要实现基于Refresh Token的机制。Refresh Token是一种长期有效的凭据，用于获取新的Access Token。
3.前端实现：
a.定时检查与刷新：前端可以设置一个定时器，在Token即将过期时（例如，Token有效期的80%时间点），向后端发送刷新请求，用旧的Access Token或Refresh Token换取新的Access Token。
b.拦截器处理：利用HTTP请求拦截器，在每次发起请求前检查Token是否即将过期，如果快过期，则先调用刷新Token的API，然后再继续原来的请求操作。这样可以确保请求总是携带有效的Token。
c.存储管理：需要安全地存储Token和Refresh Token，前端通常使用localStorage、sessionStorage或Cookie，但要注意安全性考量，避免XSS和CSRF攻击。
4.透明化处理：确保刷新Token的操作对用户界面和体验的影响降到最低，即在后台默默完成，用户不应感受到页面刷新或跳转。
5.错误处理：如果Token刷新失败（例如，Refresh Token也已过期或被撤销），前端需要有相应的错误处理逻辑，比如引导用户重新登录。
6.优雅降级：即便刷新机制设计得很完善，也需要考虑异常情况下的用户体验，如网络问题导致刷新失败时，应提供友好的提示信息，并给予用户重新认证的途径。
通过上述策略，可以确保用户在使用应用过程中，即便Token过期也能在后台自动完成刷新，维持用户会话的连续性，达到“无感刷新”的目的。

3.方案

3.1.登录态保存
单点登录之后保存token，以及refreshToken,本地持久化token以及refreshToken，以及tokenUpdateTime.
tokenUpdateTime用来判断最后一次更新token的时间。
3.2.刷新token策略
1.设置过期时间定时刷新token，token过期时间为1小时，每一小时刷新token，刷新token之后可以同步刷新用户相关数据及需要更新的数据。
2.加载页面时，校验登录态，若是存在token以及refreshToken，检测token，发起请求是返回错误是token过期，则调用refresh Token接口，更新token以及refreshToken。更新Token refreshToken接口报错异常，则记录失败次数tryTimer,tryTimer = 1,并且1秒之后重新发起请求，重新请求发起次数最多为3次，三次尝试刷新token请求失败，则跳转到登录页或新开标签页跳转到登录页或跳出弹窗登录之后关闭弹窗，登录之后token会重新刷新，可以在原来页面继续操作。
token刷新成功之后重置tryTimer， tryTimer = 0。
3.3.同步执行时token失效
由于同步代码执行优先级最高，定时器中的任务不一定能够及时的更新token，
3.4.清除token
用户退出登录时清除token、refreshToken、tryTimer，移除相关的持久化数据
3.5.流程图

4.实现

4.1.token管理策略
存储token相关数据在localStorage，刷新登录态及退出登录时都需及时更新数据
4.2.刷新token策略
创建缓存请求队列 requestQueue = [ ], 是否存在有效登录token 。
请求拦截器拦截请求结果，判断是否需要刷新登录态，需要刷新登录态，推送请求进入缓存请求队列，登录态刷新成功之后，检查缓存请求队列requestQueue，依次执行缓存请求队列请求。

4.3.刷新页面策略
监听登录态更新，根据业务需要更新页面数据。