签入版本

EasyGoAdmin_Gin_EleVue/zh/frontend/login.md

@@ -1,75 +1,58 @@
 # 9.8 登录流程
 
 :::tip 概述
-本节说明前端登录流程的实现，包括登录表单提交、Token 存储、路由守卫和登出处理。
+登录页提供四种表单：账号密码、手机验证码、扫码登录、注册。以账密登录为主线：验证码获取 → 登录换取双令牌 → 落 storage → 跳首页（守卫接管拉信息、生成路由）。
 :::
 
-## 前端登录流程
+## 页面组成
 
 ```text
-1. 用户输入用户名、密码、验证码
-2. 调用 POST /api/login 接口
-3. 成功 → 存储 Token 到 localStorage
-4. 路由守卫检测到 Token → 获取用户信息
-5. 生成动态路由 → 跳转首页
+views/login/
+├── index.vue          登录容器（表单切换）
+├── LoginForm.vue       账号密码 + 图形验证码
+├── PhoneForm.vue       手机验证码
+├── QrcodeForm.vue      扫码登录
+└── RegisterForm.vue    注册
 ```
 
-## 登录页面代码
+## 账密登录时序
 
-```vue
-<!-- src/views/login/index.vue -->
-<template>
-  <el-form :model="loginForm" @submit.prevent="handleLogin">
-    <el-form-item>
-      <el-input v-model="loginForm.username" placeholder="用户名" />
-    </el-form-item>
-    <el-form-item>
-      <el-input v-model="loginForm.password" type="password" placeholder="密码" />
-    </el-form-item>
-    <el-form-item>
-      <el-input v-model="loginForm.captchaCode" placeholder="验证码" />
-      <img :src="captchaImage" @click="refreshCaptcha" />
-    </el-form-item>
-    <el-button type="primary" @click="handleLogin">登录</el-button>
-  </el-form>
-</template>
-
-<script setup>
-import { useUserStore } from '@/store/modules/user';
-import { getCaptcha } from '@/api/common/user';
-
-const userStore = useUserStore();
-const loginForm = ref({ username: '', password: '', captchaCode: '', captchaKey: '' });
-const captchaImage = ref('');
-
-// 获取验证码
-const refreshCaptcha = async () => {
-  const res = await getCaptcha();
-  loginForm.value.captchaKey = res.key;
-  captchaImage.value = res.image;
-};
-
-// 登录
-const handleLogin = async () => {
-  await userStore.login(loginForm.value);
-  router.push('/');
-};
-
-onMounted(() => refreshCaptcha());
-</script>
+```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 存储
 
-```typescript
-// 登录成功后存储
-storage.set(ACCESS_TOKEN, data.access_token, 7 * 24 * 60 * 60 * 1000);  // 7天过期
+- storage 键：`ACCESS_TOKEN`（mutation-types 常量）
+- 请求拦截器自动附加 `Authorization: Bearer`
+- 支持 URL `?token=` 直接落 storage（单点登录跳转集成）
 
-// 请求拦截器自动携带
-config.headers['Authorization'] = `Bearer ${token}`;
+## 验证码交互
 
-// 响应拦截器检测 401
-if (response.data.code === 401) {
-    router.push('/login');
-}
-```
+- 图片点击刷新（uuid 换新，一码一用）
+- 开发环境可配万能码（captcha.bypassCode，生产禁止非空）
+
+## 登出
+
+登出调 `/api/logout`（后端拉黑双令牌），前端清 storage 与 store 回登录页。
+
+## 四种表单的后端支撑
+
+| 表单 | 说明 |
+|---|---|
+| 账密 | 标准登录（本页主线） |
+| 手机 | 短信验证码通道（依赖短信能力，任务包内有 SendSms 示例） |
+| 扫码 | 扫码确认通道 |
+| 注册 | 开放注册场景（注册即建用户） |
+
+## 相关
+
+- [5.2 认证与授权流程](/zh/core/auth-flow.html)
+- [8.7 Token 使用说明](/zh/api-spec/token.html)