vue.js 中用 ref 实现无感刷新 token 的核心是封装响应式状态单元，通过 ref 管理 token 有效、过期、刷新中三种状态，配合 computed ref、请求拦截器中的 promise 缓存与 watcheffect 自动更新，实现业务透明、无中断、防并发的刷新机制。

Vue.js 中用 ref 实现无感刷新 Token，核心不是“自动重发请求”，而是让异步 Token 刷新过程对业务组件透明、不打断用户操作、不引发重复请求或状态错乱。 关键在于把 Token 刷新逻辑封装进一个可复用的响应式状态单元，由 ref（配合 onBeforeUnmount 和 watchEffect）协调生命周期与并发控制。

用 ref 封装 Token 刷新状态

定义一个 ref 来承载当前 Token 状态，并区分“有效”、“过期待刷新”、“刷新中”三种情况：

• 不直接暴露原始 token 字符串，而是暴露一个 computed ref 或带 getter 的 reactive 对象，读取时自动触发刷新逻辑
• 内部用 ref({ token: '', status: 'idle' }) 管理状态，status 可为 'valid' | 'expired' | 'refreshing'
• 刷新失败时保留旧 token（若未彻底失效）并延后重试，避免立即登出

拦截请求 + 延迟 resolve 实现“无感”

在 axios 请求拦截器中检查 token 状态，若为 'expired'，则：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 不立即 reject 或跳转登录页，而是调用刷新函数并返回一个 Promise，该 Promise 在刷新成功后 resolve 原始 config
• 同一时刻多个过期请求应共享同一个刷新 Promise（用 refreshPromiseRef 缓存），避免并发刷新
• 刷新成功后更新 ref 状态，并通知所有等待中的请求继续执行

组件内无需手动处理，靠响应式驱动

业务组件通过 const { token } = useAuth() 获取 token，其中 token 是一个 computed ref：

• getter 内部检查状态，若为 'expired' 则触发刷新并 await（但对外仍是同步访问形式）
• 配合 watchEffect 监听 token 变化，自动重新拉取受保护数据（如用户信息）
• 组件卸载前清除 pending 刷新回调（用 onBeforeUnmount 清理副作用），防止内存泄漏或状态污染

错误降级与静默重试策略

无感 ≠ 忽略错误。需设计合理兜底：

• 刷新失败时设置短暂冷却期（如 30s），期间新请求仍用旧 token（若签名未失效）或直接报错
• 连续失败 N 次（如 3 次）后清空 token 并跳转登录页，避免无限循环
• 对非敏感接口（如首页公告）允许 token 过期后仍发起请求，后端返回 401 再触发刷新，减少首屏阻塞

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！