在现代 Web 应用中，用户登录后通常会获得一对 Token：Access Token 和 Refresh Token。当 Access Token 过期时理想状态是前端自动用 Refresh Token 换取新 Token，并重试原请求，整个过程用户无感，页面不跳转、操作不中断。

核心机制解析 无感刷新流程详解

“无感刷新”的核心在于实现后台刷新流程，而无需用户手动操作。

RefreshToken 验证： 当 Access Token 过期时前端发起一个请求到后端验证 Refresh Token 的有效性。

服务端验证： 后端根据 Cookie 中的 Refresh Token 验证其是否有效。

Token 刷新： Ru果 Refresh Token 有效，后端返回一个新的 Access Token 和一个新的 Refresh Token。

前端geng新： 前端接收到新的 Access Token 后geng新本地缓存，并使用新的 Access Token 重试之前的请求。

无感知体验： 用户在不知情的情况下继续访问应用，无需重新登录或手动刷新页面。

关键设计要素

锁机制 : 确保同一时间只有一个请求正在进行刷新操作, 防止多个请求同时尝试刷新导致资源竞争或数据冲突.

重试队列 : 存储因 refreshToken过期或其它错误导致失败的请求, 等待新token可用后批量处理.

HttpOnly Cookie: Refresh token 必须存储在 HttpOnly Cookie 中, 防止 XSS 攻击窃取. 客户端JavaScript无法直接访问该cookie的值, 保障安全.

表面kan没问题，但隐藏三大坑 坑一: 缺乏同步与并发控制

Ru果多个用户同时发生Access token过期情况, 前端可Neng同时发起refreshToken请求, 会导致重复的token刷新逻辑和潜在的竞争问题.

let isRefreshing = false; // 锁机制

坑二: 缺乏错误处理与重试策略

refreshToken失效或者网络错误导致失败时, 需要有完善的重试策略和错误处理机制来保证服务稳定.

代码示例

// Axios拦截器配置示例

axios.interceptors.response.use { // Check for expired token

const newToken = await refreshToken; // 获取新 token

saveToken; // 保存新的token

 return axios;

});});

---