ref 是 Vue 3 管理 token 的基础响应式工具，需配合 localStorage 持久化、Pinia Store 封装、Axios 拦截器自动携带与错误处理，并建议同步 ref 用户信息以支撑权限控制等业务场景。
ref 是 Vue 3 响应式系统最基础的工具，适合管理简单、独立的登录凭证状态，比如单个 token 字符串。但它不等于完整解决方案——它只负责“让 token 变化时自动更新视图”，而 token 的获取、存储、校验、过期处理、跨组件共享等，需要配合其他机制一起完成。
ref 存 token 的基本写法
在 Pinia Store 中用 ref 管理 token 是当前主流做法，清晰且类型安全：
- 定义一个
ref<string>('')保存 token 值 - 提供
setToken(token: string)方法赋值（同时可同步写入 localStorage） - 提供
clearToken()方法清空（同时移除 localStorage 中的项） - 组件中通过
userStore.token直接读取，响应式生效
仅靠 ref 不够，必须搭配持久化
页面刷新后 ref 会重置为空字符串，所以 token 必须落地存储：
- 登录成功后：调用
localStorage.setItem('token', response.data.token) - 应用启动时（如 main.ts 或 store 初始化阶段）：读取
localStorage.getItem('token')，非空则赋给 ref - 退出登录时：既要
token.value = ''，也要localStorage.removeItem('token')
ref 需要和 Axios 拦截器联动
token 存对了，还得自动带上请求头：
立即学习“前端免费学习笔记（深入）”；
- 在请求拦截器里读取
userStore.token.value，有值就加Authorization: Bearer xxx - 在响应拦截器里捕获 401，触发
clearToken()并跳转登录页 - 注意：不要在拦截器里直接访问 localStorage，保持逻辑统一在 store 内
进阶建议：别只存 token，也 ref 用户信息
实际业务中，用户头像、角色、权限列表等常需全局访问：
- 用另一个
ref<UserProfile | null>(null)存用户资料 - 登录成功后，
setToken和setProfile一起调用 - 菜单渲染、按钮显隐、路由守卫都能直接依赖这两个 ref
