Vue 3 静默更新令牌依赖请求与响应拦截器协同及 token 刷新队列：响应拦截器捕获 401 后挂起请求并交由统一刷新中心调度，避免重复刷新；刷新成功后更新 token 并重放队列请求，失败则跳转登录；请求拦截器实时读取 pinia 中最新 token 注入请求头；refresh token 应存 httpOnly Cookie 并由后端严格校验。
Vue 3 中响应拦截器本身不直接“静默更新操作令牌”，真正起作用的是请求拦截器 + 响应拦截器协同 + token 刷新队列机制。静默更新的关键在于：当业务请求因 access token 过期收到 401 时，不立即跳转登录页，而是拦截该响应、触发刷新流程、等待新 token 返回后，再重放原始请求——整个过程用户无感知。
核心逻辑：用响应拦截器捕获 401，交由统一刷新流程处理
响应拦截器只做一件事：识别认证失败（如状态码 401 或后端自定义错误码），然后把当前请求“挂起”，交由 token 刷新中心统一调度。它不自己发刷新请求，也不直接修改 token，避免重复刷新和竞态问题。
- 检测到 401 响应时，先判断是否已在刷新中；若未开始，则启动 refresh 请求
- 所有待重试的请求暂存进一个队列（Promise 队列），不立刻 reject
- 刷新成功后，用新 access token 更新本地存储（如 pinia store 或 localStorage），并遍历队列，用新 token 重发每个原始请求
- 刷新失败（如 refresh token 过期或无效），才清空凭证、跳转登录页
必须配合请求拦截器注入最新 token
响应拦截器完成刷新后，token 已更新，但后续请求仍需携带新值。这就依赖请求拦截器在每次发请求前读取当前最新的 access token：
- 推荐将 token 存在 pinia 的全局 auth store 中（而非仅 localStorage），确保响应式更新可被拦截器实时读取
- 请求拦截器中通过 store.accessToken 获取值，并设置 Authorization 头
- 这样即使刷新发生在后台，下一次请求自动使用新 token，无需手动干预
解决并发请求下的重复刷新问题
多个请求几乎同时返回 401 是常见场景。若每个都触发独立刷新，会导致多次调用 /refresh 接口，既浪费资源又可能触发服务端限流。
- 用一个布尔标志 isRefreshing 控制刷新状态，首次 401 触发刷新，其余 401 暂停并加入等待队列
- 刷新 Promise 被缓存（如 const refreshPromise = api.refresh()），后续请求 await 同一个 Promise 实例
- 刷新完成后，所有等待中的请求统一 resolve，避免 race condition
安全细节不能省：refresh token 的存储与校验
静默刷新的前提是 refresh token 可靠可用：
- refresh token 不建议存 localStorage（易被 XSS 窃取），优先存 httpOnly cookie；前端只需在刷新接口中让浏览器自动携带即可
- 若必须存在前端，至少用加密方式（如 AES）+ 动态密钥保护，且仅在刷新时解密使用
- 后端刷新接口必须校验 refresh token 的签名、有效期、绑定设备/指纹（可选），并限制单次使用（用后即废）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
