Vue 3 中响应拦截器怎么在后台静默刷新过期的 Token-Vue.js-PHP中文网

vue 3 中响应拦截器实现后台静默刷新 token 的关键是提前预判过期、并发控制与请求队列重放：请求前解析 access token 的 exp 字段，剩余不足60秒即触发不阻塞的刷新流程，用 promise 缓存防重复，401 时兜底重放请求，并将 refresh token 存于 httponly cookie 中保障安全。

vue 3 中响应拦截器怎么在后台静默刷新过期的 token

Vue 3 中响应拦截器实现后台静默刷新 Token，核心不是等 401 才行动，而是提前预判 + 并发控制 + 请求队列重放。真正“无感”的关键，在于避免用户看到登录页、不中断操作、不重复刷新。

提前检查 Token 是否即将过期

不要等到后端返回 401 再处理——那时请求已失败，体验已中断。应在每次请求发出前，就用 jwt-decode 解析本地 Access Token 的 exp 字段，结合当前时间判断是否剩余不足 60 秒（可配置）：

若即将过期，立即触发刷新流程，但不阻塞当前请求
原请求暂存，等待新 Token 到位后自动重发
刷新请求本身走独立路径（如不带 Authorization 头），避免被拦截器二次拦截

用 Promise 缓存 + 请求队列防重复刷新

多个请求几乎同时发现 Token 将过期时，必须确保只发起一次刷新请求。常用做法是用一个全局 Promise 变量缓存刷新任务：

Openclaw Token Memory Optimizer

{"answer":"OpenClaw Agent 优化套件，防止令牌泄露与上下文膨胀。适用于需实现后台任务隔离或重置与摘要工作流（RAG）的场景。"}

下载

首次检测到需刷新 → 调用 refreshToken()，将返回的 Promise 存入变量（如 refreshPromise）
后续请求检测到 refreshPromise 正在进行 → 直接 await refreshPromise，复用同一结果
刷新成功后清空该变量；失败则重置，避免卡死

响应拦截器中接管 401 并重放原始请求

尽管做了提前检查，仍可能因网络延迟、时钟偏差或并发竞争导致某次请求携带了已过期 Token 并收到 401。此时响应拦截器要兜底：

判断 error.response.status === 401 且 !originalRequest._retry
标记 originalRequest._retry = true，防止循环重试
调用刷新逻辑（复用上面的缓存 Promise）
拿到新 Token 后，更新请求头：originalRequest.headers.Authorization = 'Bearer ' + newToken
用 axios 重新发起 originalRequest，并返回其 Promise，让业务层无感知