登录后将token等必要信息存入localstorage实现持久化，页面加载时校验并同步状态，注销时须服务端作废token后清除本地数据。
用户登录后，可通过 Web Storage（主要是 localStorage）在浏览器端持久保存登录凭证（如 token 或用户基本信息），实现页面刷新或关闭后仍保持登录状态；注销时需主动清除这些数据，并通知服务端作废凭证。
登录成功后保存凭证到 localStorage
服务端返回有效 token（如 JWT）或用户标识后，前端应将其存入 localStorage，避免使用 sessionStorage（关闭标签页即丢失，无法满足“保持状态”需求）：
- 推荐只存必要字段：例如
auth_token、user_id、expires_at（过期时间戳），不建议直接存明文密码或敏感信息 - 示例代码：
localStorage.setItem('auth_token', response.data.token);localStorage.setItem('user_id', response.data.user.id);localStorage.setItem('expires_at', Date.now() + response.data.expires_in * 1000); - 可封装统一的存储方法，自动处理 JSON 序列化（如用户对象）与过期校验逻辑
页面加载时检查并恢复登录状态
应用初始化（如 Vue 的 main.js、React 的根组件 useEffect）需读取 localStorage 并验证有效性：
- 先读取
auth_token和expires_at，若不存在或已过期，视为未登录 - 建议配合一次轻量级接口校验（如
/api/user/profile），防止本地 token 被篡改或服务端已主动吊销 - 验证通过后，将用户信息同步至前端状态管理（Vuex/Pinia/Redux）或 React Context，驱动路由守卫和 UI 渲染
安全注销：清空本地数据 + 服务端登出
仅清除 localStorage 不足以保障安全，必须和服务端协同完成注销流程：
- 调用服务端登出接口（如
POST /api/auth/logout），使服务端作废该 token（加入黑名单或清空 session） - 服务端响应成功后，再执行本地清理：
localStorage.removeItem('auth_token');localStorage.removeItem('user_id');localStorage.removeItem('expires_at'); - 重定向至登录页，并清空前端用户状态（如重置 store 中的 user 字段）
- 注意：避免仅前端清除就认为已注销，否则攻击者可能复用残留 token 发起请求
补充建议：提升健壮性与体验
实际项目中还需考虑边界情况：
- token 自动续期：在过期前 5 分钟发起刷新请求，更新
localStorage中的 token 和expires_at - 多标签页同步：监听
storage事件，在其他标签页注销时自动触发本页登出 - 隐私模式兼容：部分浏览器在无痕模式下禁用
localStorage，需降级为内存存储并提示用户“关闭页面将退出登录” - 敏感操作二次验证：高权限操作（如修改密码、支付）不依赖本地 token，应单独要求重新输入密码或短信验证
