核心在于校验时机统一化、令牌生命周期可感知、状态与路由联动：路由守卫拦截跳转并校验token，请求拦截器自动携参并预判过期，响应拦截器捕获401清空状态；JWT的exp字段用于计算剩余时间，Pinia+持久化插件存token及expiresAt，刷新时静默续期，退出时$reset并清除localStorage。
Vue 3 中处理动态密码令牌（如 JWT）的登录状态管理，核心在于「校验时机统一化 + 令牌生命周期可感知 + 状态与路由联动」。不是简单存个 token 就完事，而是要让整个应用清楚知道：当前有没有效、快过期了没、过期了怎么续、失效了怎么清。
token 校验该在哪儿做？
不能只靠组件内手动判断，必须收口到路由守卫和请求拦截器里：
- 路由守卫（router.beforeEach）：拦截所有页面跳转，检查 token 是否存在、是否过期；白名单页（如登录页、404）直接放行，其他页需校验通过才允许进入
- Axios 请求拦截器：每次发请求前自动带上 token；若 token 即将过期（比如剩余 5 分钟），可提前触发刷新逻辑
- 响应拦截器：捕获 401 响应，说明 token 已失效，此时清空状态、跳转登录页，避免用户卡在空白页或报错界面
动态令牌怎么判断“快过期”？
JWT 的 payload 里自带 exp（过期时间戳），前端可直接解析并计算剩余时间：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 用
atob(token.split('.')[1])解析 base64 编码的 payload，拿到exp字段（单位为秒） - 对比
exp * 1000 - Date.now()，若结果小于 300000（5 分钟），就该静默刷新 access_token - 刷新逻辑建议由 Pinia store 统一管理，避免多个地方重复调用 refresh 接口
状态该存在哪？怎么保证刷新不丢？
登录态信息（token、用户基本信息、权限菜单）建议用 Pinia + 持久化插件统一管理：
- 使用
pinia-plugin-persistedstate，把关键字段存入 localStorage，页面刷新后自动恢复 - 不要只存 token，也存
expiresAt（过期时间戳）和userRole，方便路由守卫和按钮权限快速判断 - 退出登录时，Pinia store 调用
$reset()，同时清除 localStorage 中相关字段，防止残留旧态
密码本身要不要前端加密？
可以加一层轻量防护，但不能替代 HTTPS 和服务端校验：
- 登录提交前，用
CryptoJS.SHA256或SubtleCrypto.digest对密码哈希，避免明文暴露在请求体中 - 注意：哈希只是防传输窥探，不是密码加密；后端仍需用 bcrypt/scrypt 等强哈希算法存储密码
- 更推荐结合滑块验证等行为验证，降低暴力尝试成功率，尤其对高频登录入口
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
