59 lines
1.9 KiB
Markdown
59 lines
1.9 KiB
Markdown
# 9.8 登录流程
|
||
|
||
:::tip 概述
|
||
登录页提供四种表单：账号密码、手机验证码、扫码登录、注册。以账密登录为主线：验证码获取 → 登录换取双令牌 → 落 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 示例） |
|
||
| 扫码 | 扫码确认通道 |
|
||
| 注册 | 开放注册场景（注册即建用户） |
|
||
|
||
## 相关
|
||
|
||
- [5.2 认证与授权流程](/zh/core/auth-flow.html)
|
||
- [8.7 Token 使用说明](/zh/api-spec/token.html)
|