|
|
# 登录页面
|
|
|
|
|
|
> 最后更新：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 }
|
|
|
```
|