双Token刷新机制详解

一、核心概念1. 两个Token作用AccessToken 访问令牌有效期短5分钟~30分钟作用请求业务接口放在请求头鉴权特点易过期泄露影响小RefreshToken 刷新令牌有效期长7天~30天作用专门用来换新AccessToken特点不参与业务请求只走刷新接口2. 设计目的缩短短期凭证寿命降低被盗用风险实现无感续登用户不用重复登录服务端可主动拉黑刷新Token强制下线二、完整流程标准流程步骤1用户登录账号密码/三方登录校验通过后端生成access_token短期refresh_token长期同时返回过期时间前端存储AccessToken内存 / Header尽量不存本地RefreshTokenHttpOnly Cookie / localStorage优先Cookie防XSS步骤2正常业务请求Authorization: Bearer ${access_token}后端校验签名是否过期合法则放行接口。步骤3AccessToken过期触发刷新三种触发时机任选请求前预判前端本地判断即将过期先发刷新响应拦截捕获接口返回401 Token过期自动走刷新定时轮询定时主动刷新步骤4调用刷新接口POST /api/auth/refresh 携带refresh_token步骤5后端刷新逻辑校验refresh_token是否合法、是否黑名单、是否过期合法 → 生成新 AccessToken部分方案同时换新RefreshToken返回新令牌给前端步骤6前端替换令牌丢掉旧AccessToken写入新AccessToken重试刚才失败的业务请求用户全程无感知步骤7RefreshToken过期直接清空本地令牌强制跳转登录页三、后端核心逻辑JWT为例1. 签发规则Accessexp 当前 15分钟 Refreshexp 当前 7天2. 刷新接口规则校验RefreshToken签名查询刷新令牌黑名单登出/踢人存入校验通过 → 下发新Access进阶方案滚动刷新每次刷新同时下发新RefreshToken旧RefreshToken加入黑名单作废优点更安全防止长期静态刷新Token被盗3. 登出逻辑前端清空本地所有Token后端把当前RefreshToken加入黑名单即使Token没过期也无法再刷新四、前端实现要点Vue/React/Next.js通用1. 存储最优方案AccessToken运行时内存存储不持久化RefreshToken存入HttpOnly Secure Cookie彻底防止XSS盗取前端JS无法读取最安全2. 拦截器逻辑业务请求401判断错误码令牌过期暂停所有 pending 请求执行刷新Token刷新成功替换令牌批量重试暂停的请求刷新失败清空登录态 → 跳登录页3. 防并发刷新BUG重中之重问题多个接口同时401会发起多次刷新请求解决定义全局正在刷新锁正在刷新时后续刷新请求直接排队不再重复调用刷新接口五、常见两种模式模式1 静态刷新Token简单RefreshToken永久不变只刷新Access优点开发简单缺点Refresh一旦泄露长期可用模式2 滚动刷新Token企业级推荐每次刷新 →换新RefreshToken旧Refresh立刻失效拉黑安全性最高主流后台、SaaS、Web3项目都用这个六、优缺点总结优点短期令牌短命被盗风险极低用户无感自动续期体验极佳服务端可控下线权限管控灵活适配移动端、小程序、浏览器全端缺点前端拦截器逻辑变复杂要处理排队、重试、锁状态后端需要维护刷新令牌黑名单Redis最合适多端登录需做令牌管理七、一句话总结双Token机制采用短期AccessToken鉴权业务长期RefreshToken无感续期Access有效期短降低泄露风险Refresh用于过期换签前端通过响应拦截捕获401自动刷新加状态锁防止并发重复刷新后端基于Redis维护刷新令牌黑名单实现登出踢人支持滚动刷新进一步提升安全性兼顾安全性与用户体验。八、最简技术选型搭配令牌格式JWT黑名单存储Redis前端存储Refresh→HttpOnly CookieAccess→内存过期配置Access 15minRefresh 7d刷新策略滚动刷新