vue 3 中登录状态刷新丢失需用 pinia 持久化，state 初始化从 localstorage 读 token，配合 pinia-plugin-persistedstate 或手动同步 storage，登录/登出须双向更新，请求拦截器和路由守卫统一通过 store 获取 token 并处理未登录或过期逻辑。
登录状态在 Vue 3 中刷新即丢，本质是内存数据重置。用 Pinia 管理登录信息必须搭配持久化，否则 store 里的 token 和用户资料一刷新就清空，路由守卫直接把你踢回登录页。关键不是“存 token”，而是让 token、用户信息、登录态三者在内存和本地存储中始终保持一致，并自动参与请求和路由逻辑。
创建带持久化的用户 Store
定义 useUserStore 时，state 初始化要从 localStorage 读取 token，不能写死空字符串；否则页面加载时 store 为空，后续所有依赖都失效。
- 用 pinia-plugin-persistedstate 插件最省心：安装后在 main.ts 注册，store 定义里加
persist: { pick: ['token', 'userInfo'] }，插件自动完成读写 - 手动初始化也行：state 中写
token: localStorage.getItem('auth_token') || ''，userInfo 设为null或空对象，避免解构报错 - 敏感字段如
loginTime或临时 loading 状态，别进 persist 列表——既节省空间，也防意外泄露
登录/登出必须同步更新 store 和 storage
登录成功后只改 this.token 不够，必须同时写入 localStorage；登出同理，store 清空和 storage 删除得一步到位，否则状态不一致会引发跳转异常或请求失败。
- 封装 setLogin(token, userInfo) 方法：内部执行
this.token = token+localStorage.setItem('auth_token', token)+this.userInfo = userInfo - 登出函数 logout() 要调用
this.token = ''、this.userInfo = null和localStorage.removeItem('auth_token') - 如果用了加密存储（如 AES），把加密逻辑塞进 setItem 前，解密逻辑塞进 getItem 后，插件支持自定义序列化函数
请求拦截器自动带 Authorization 头
所有受保护接口都要自动带上 token，但不要在 axios 拦截器里直接读 localStorage——统一走 store 取值，方便后期切换存储方式（比如换成 HttpOnly Cookie）。
- 在 request 拦截器中调用
useUserStore().accessToken（getter 返回 token） - 若 token 为空，可直接 return Promise.reject()，或跳转登录页并缓存当前路由路径
- 避免在拦截器里做异步操作（如 refreshToken），除非你已实现完整的 token 刷新队列机制
路由守卫控制未登录访问
用户手动输入 /dashboard 等私有路径时，必须拦截并重定向。守卫逻辑要区分“未登录”和“已登录但 token 过期”两种情况。
- 全局前置守卫中判断
useUserStore().isLoggedIn - 目标路由 meta.requiresAuth 为 true 且未登录 → 跳转 /login，并用
to.fullPath记录来源，登录成功后跳回 - 已登录但 token 过期 → 触发 refresh token 流程，失败则调用 logout() 强制清理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
