# 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)