登录状态管理不直接校验图形验证码，而是待后端验证通过后持久化凭证、同步状态并控制路由；验证码必须由后端比对，前端仅传captchaId，服务端存明文于session/Redis并限时失效；Pinia状态更新须在登录接口成功返回token和userInfo后执行，避免先存后请求；验证码UI应独立封装，输入框用局部ref，刷新时不解耦其他字段；路由守卫仅依据最终登录状态放行，验证码错误需页面提示而非跳转。
登录状态管理本身不直接处理图形验证码校验，而是与验证码校验协同工作：验证码校验由后端完成并返回结果，登录状态管理负责在验证通过后持久化用户凭证、同步全局状态，并控制路由跳转。
验证码校验必须由后端完成
前端不能自行比对输入的验证码和生成的值。常见错误是把验证码文本存在 localStorage 或响应式变量中，然后前端直接判断是否相等——这完全不安全。
- 服务端生成验证码时，需将明文（如 "K7mX"）存入 session 或 Redis，设置 2–5 分钟有效期
- 前端只保留一个随机 captchaId（如 UUID），随登录请求一并提交
- 后端收到登录请求后，根据 captchaId 查出原始验证码，比对用户输入，比对失败则拒绝登录
- 无论成功或失败，该 captchaId 对应的验证码立即失效（del 或 expire）
登录状态管理配合验证码流程
使用 Pinia 管理登录状态时，需在验证码校验成功后再更新状态：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 调用登录接口前，先校验表单（账号、密码、验证码非空）
- 登录接口返回 { success: true, token, userInfo } 后，才调用 userInfoStore.setLogin(token, userInfo)
- store 内部应自动触发持久化（如启用 pinia-plugin-persist）并通知所有监听者
- 避免“先存状态再发请求”——防止请求失败但状态已误设
验证码刷新与状态解耦
图形验证码图像本身是无状态的 UI 元素，不应与登录 store 混绑：
立即学习“前端免费学习笔记（深入）”；
- 单独封装 useCaptcha() 组合式函数，负责加载图片、生成新 captchaId、重置输入框
- 验证码输入框用局部 ref 管理（如 captchaInput），不放入全局 store
- 点击“换一张”时，只刷新图片和 captchaId，不触碰用户账号/密码等字段
- 登录失败（含验证码错误）时，仅清空验证码输入框并重新加载图片，其他字段保持不变
路由守卫中体现校验结果
前置守卫（router.beforeEach）不检查验证码，但需识别登录结果：
- 若 store.isLogin === false，且访问受保护页面（如 /dashboard），重定向到 /login
- 若登录接口返回验证码错误，应在页面上明确提示（如 ElMessage.error('验证码不正确，请重试'）），不跳转
- 仅当完整登录成功（token + 用户信息写入 store）后，守卫才放行目标路由
- 可扩展：在 store 中增加 loginAttempt 字段，用于防暴破（如 5 次失败锁 15 分钟）
