Vue 3登录态管理需兼顾安全与可用：推荐敏感项目用HttpOnly Cookie存access_token防XSS，localStorage仅存非敏感信息；必须前端存token时应结构化存储、配合Pinia持久化及短时效+刷新机制。
Vue 3 中登录状态管理不能只靠内存存储，否则刷新页面就会丢失登录态。Token 要安全保存在本地存储中，核心是“存得对、读得准、用得稳、清得及时”，同时兼顾安全性与可用性。
选择 localStorage 还是 Cookie？关键看安全需求
localStorage 是最常用的方式，但不是最安全的：
- localStorage 优点：容量大（约5MB）、操作简单、适合前端完全控制 Token 的场景（如纯 SPA）
-
localStorage 缺点：易受 XSS 攻击——恶意脚本可直接读取
localStorage.getItem('token') - Cookie（带 HttpOnly）优点：浏览器自动携带、JS 无法读取（防 XSS）、支持 Secure + SameSite 属性（防 CSRF 和中间人劫持）
- 推荐组合：敏感项目用 HttpOnly Cookie 存 access_token，前端仅用 localStorage 存非敏感信息（如用户昵称、菜单权限）；若必须前端存 token，至少搭配加密或双 token 机制
正确保存和读取 Token 的基本流程
登录成功后，不要只存 token 字符串，要结构化、可验证地保存：
- 登录响应拿到
{ access_token, refresh_token, user: { id, name, role } }后，立即写入： localStorage.setItem('auth', JSON.stringify({ at: 'xxx', rt: 'yyy', user: {...}, expires: Date.now() + 3600000 }))- 应用启动时（如
main.ts或 pinia store 初始化），优先从 localStorage 恢复： - 解析后校验
expires时间，过期则自动清除并跳转登录页 - 避免直接使用
localStorage.setItem('token', rawToken)—— 缺少上下文、无法扩展、难以维护
配合 Pinia 实现响应式 + 持久化双保障
单纯 localStorage 不响应，用户组件无法自动更新登录状态。推荐用 Pinia + 持久化插件：
立即学习“前端免费学习笔记（深入）”；
- 安装插件：
npm install pinia-plugin-persistedstate - 在 store 中定义 auth state，并声明持久化策略：
- 示例代码片段：
export const useAuthStore = defineStore('auth', {state: () => ({token: '',user: null as User | null,isLogin: false}),persist: {key: 'auth_v3',storage: localStorage,paths: ['token', 'user', 'isLogin']}})
安全增强建议（不难做，但很关键）
Token 存本地不是终点，而是安全链的第一环：
- 启用 HTTPS：所有传输必须走 HTTPS，否则 localStorage 或 Cookie 都可能被中间人截获
- 短时效 access_token + 长时效 refresh_token：前端只用 access_token 请求 API，过期后用 refresh_token 向后端换新 token（避免长期暴露高权限凭证）
-
登出时彻底清理：调用
localStorage.removeItem('auth')并清空 store，同时向后端发起/logout失效服务端 token（尤其 Redis 中的 refresh_token） - 敏感操作二次校验：修改密码、支付等动作，即使已登录，也应要求重新输入密码或短信验证
