Pinia 实现 Token 全局状态托管需确保刷新不丢失、请求自动携带、路由跳转受控三者协同；通过持久化 store、原子化登录登出操作、axios 拦截器注入 token、路由守卫校验登录态形成闭环。
Pinia 实现 Token 全局状态托管，关键不是“存进去”，而是让 token 在页面刷新不丢失、请求自动带上、路由跳转受控——三者协同才算真正托管成功。
创建带持久化的用户 Store
Token 必须在 store 初始化时就从 localStorage 读取，否则刷新即丢：
- state 中 token 字段写成 localStorage.getItem('auth_token') || ''，而不是空字符串
- userInfo 可设为 null 或空对象，避免解构时报错
- 推荐用 pinia-plugin-persistedstate 插件，配置
persist: true即可自动同步 localStorage，省去手动读写 - 如需更高安全性（防 XSS），可在插件中自定义序列化函数，用 AES 加密后再存
登录/登出必须同步更新 Store 和本地存储
不能只改 store，也不能只写 localStorage——必须原子化操作，保证两端一致：
- 登录成功后，setToken(token) 方法里同时执行：
this.token = token和localStorage.setItem('auth_token', token) - 登出时，clearAuth() 方法要清空 store 字段 + 调用
localStorage.removeItem('auth_token') - 建议把这类逻辑封装进 actions，组件里只调一个方法，避免遗漏
请求拦截器统一注入 Authorization 头
所有受保护接口都应自动携带 token，且逻辑收口在一处：
- 在 axios request 拦截器中，调用 useUserStore().accessToken 获取 token
- 若 token 为空，可直接中断请求并跳转登录页，不要 fallback 到读 localStorage
- 这样设计便于后期切换存储方式（比如换成加密 Cookie），只需改 store 内部，拦截器代码完全不动
路由守卫依据登录态控制访问
防止用户手动输入 URL 绕过登录：
- 在 router.beforeEach 中检查
useUserStore().isLoggedIn - 目标路由 meta.requiresAuth 为 true 但未登录时，重定向到 login，并用
to.fullPath记录来源，登录后跳回 - 已登录但 token 过期时，可触发 refresh token 流程；失败则清空状态并强制登出
整个链路是闭环的：登录 → 存 token → 请求自动带 → 守卫校验 → 侧边栏按权限渲染。只要这根线不断，后续加页面、配权限都是顺水推舟的事。
