# 登录页面

> 最后更新：2026-04-25
> 状态：已设计

---

### 1. 基本信息

| 项 | 值 |
|----|-----|
| 路由 | /login |
| 入口 | 未登录时自动跳转，或Token过期后跳转 |

### 2. 界面布局

┌──────────────────────────────────────────────────────────┐
│                                                          │
│              ┌────────────────────────┐                  │
│              │ CNC机床数据采集系统      │                  │
│              │                        │                  │
│              │ 用户名：[____________]  │                  │
│              │ 密  码：[____________]  │                  │
│              │                        │                  │
│              │ [√ 记住我]             │                  │
│              │                        │                  │
│              │       [登  录]         │                  │
│              └────────────────────────┘                  │
│                                                          │
└──────────────────────────────────────────────────────────┘

### 3. 表单字段

| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|------|------|------|--------|------|------|
| 用户名 | el-input maxlength=50 | 是 | - | 必填 | - |
| 密码 | el-input type=password maxlength=50 show-password | 是 | - | 必填 | - |
| 记住我 | el-checkbox | 否 | 不勾选 | - | 勾选后Token有效期延长 |

### 4. 操作按钮

| 名称 | 位置 | 显示条件 | 点击行为 |
|------|------|---------|---------|
| 登录 | 表单底部 | 始终 | 校验→调登录API→成功存Token跳转仪表盘 |

### 5. 交互流程

- 进入：未登录访问管理后台→axios拦截40101→清除旧Token→router.push(/login)
- 登录：填写用户名+密码→点击登录→loading+disabled→调登录API→成功→存Token到localStorage→跳转/dashboard
- 登录失败：用户名或密码错误→el-message error显示错误信息→密码框清空+聚焦
- Token过期：访问任意管理后台页面→API返回40101→清除Token→跳转/login（带redirect参数，登录后跳回原页面）

### 6. 安全规范

| 项 | 规则 |
|----|------|
| Token存储 | localStorage，key=token |
| Token传递 | Authorization: Bearer {token} |
| Token有效期 | 默认8小时，勾选"记住我"延长至7天 |
| Token刷新 | 不做刷新机制，过期直接跳转登录页 |
| 密码传输 | HTTPS（生产环境），开发环境HTTP |
| 登录失败提示 | 统一提示"用户名或密码错误"，不区分是哪个错 |
| 防暴力破解 | 同一IP连续5次失败，锁定15分钟（后端实现） |
| 单角色 | 仅admin角色，无角色切换，无注册功能 |

### 7. 数据需求

> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。

| 数据需求 | 草案对应 | 说明 |
|---------|---------|------|
| 用户名/密码验证 | 后端硬编码或配置文件 | 单角色admin，无需用户表 |
| Token生成与验证 | cnc_sys_config (api_token) | Token值存配置表，但登录流程需后端生成JWT或类似Token |
| Token有效期 | cnc_sys_config | 记住我模式下延长有效期 |

### 8. Mock数据

**POST /api/admin/login 成功：**
```json
{ "code": 0, "message": "success", "data": { "token": "eyJhbGciOiJIUzI1NiJ9.admin.8h", "expiresIn": 28800 }}
```

**POST /api/admin/login 成功（记住我）：**
```json
{ "code": 0, "message": "success", "data": { "token": "eyJhbGciOiJIUzI1NiJ9.admin.7d", "expiresIn": 604800 }}
```

**POST /api/admin/login 失败：**
```json
{ "code": 40001, "message": "用户名或密码错误", "data": null }
```

**POST /api/admin/login 失败（IP锁定）：**
```json
{ "code": 40003, "message": "登录失败次数过多，请15分钟后重试", "data": null }
```