Become a sponsor
9.8 登录流程
概述
登录页提供四种表单：账号密码、手机验证码、扫码登录、注册。以账密登录为主线：验证码获取 → 登录换取双令牌 → 落 storage → 跳首页（守卫接管拉信息、生成路由）。
页面组成
text
views/login/
├── index.vue 登录容器（表单切换）
├── LoginForm.vue 账号密码 + 图形验证码
├── PhoneForm.vue 手机验证码
├── QrcodeForm.vue 扫码登录
└── RegisterForm.vue 注册账密登录时序
text
① 进入登录页 → /api/captcha 取 key + captcha 图片
② 用户填账号/密码/验证码
③ POST /api/login { username, password, key, code }
④ 成功：data.access_token / data.refresh_token 写 storage + user store
⑤ 跳转首页 → 路由守卫发现无动态路由 → GetInfo + generateRoutes
⑥ 进入布局页失败：拦截器弹 msg（验证码错误/密码错误/租户禁用等后端业务消息）。字段名以 internal/model/dto/auth.go（LoginReq/LoginRes）为准。
Token 存储
- storage 键：
ACCESS_TOKEN（mutation-types 常量） - 请求拦截器自动附加
Authorization: Bearer - 支持 URL
?token=直接落 storage（单点登录跳转集成）
验证码交互
- 图片点击刷新（uuid 换新，一码一用）
- 开发环境可配万能码（captcha.bypassCode，生产禁止非空）
登出
登出调 /api/logout（后端拉黑双令牌），前端清 storage 与 store 回登录页。
四种表单的后端支撑
| 表单 | 说明 |
|---|---|
| 账密 | 标准登录（本页主线） |
| 手机 | 短信验证码通道（依赖短信能力，任务包内有 SendSms 示例） |
| 扫码 | 扫码确认通道 |
| 注册 | 开放注册场景（注册即建用户） |