9.8 登录流程

:::tip 概述登录页提供四种表单：账号密码、手机验证码、扫码登录、注册。以账密登录为主线：验证码获取 → 登录换取双令牌 → 落 storage → 跳首页（守卫接管拉信息、生成路由）。 :::

页面组成

views/login/
├── index.vue          登录容器（表单切换）
├── LoginForm.vue       账号密码 + 图形验证码
├── PhoneForm.vue       手机验证码
├── QrcodeForm.vue      扫码登录
└── RegisterForm.vue    注册

账密登录时序

① 进入登录页 → /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 示例）
扫码	扫码确认通道
注册	开放注册场景（注册即建用户）

1.9 KiB Raw Blame History Unescape Escape