提交1 bmad搭建与项目启动 - ok
This commit is contained in:
364
src/AUTH_SYSTEM_GUIDE.md
Normal file
364
src/AUTH_SYSTEM_GUIDE.md
Normal file
@@ -0,0 +1,364 @@
|
||||
# 🔐 注册登录系统使用指南
|
||||
|
||||
## ✨ 系统概述
|
||||
|
||||
智慧农业生产管理系统已集成完整的用户认证授权功能，支持：
|
||||
- ✅ 用户注册与登录
|
||||
- ✅ 双重认证方式（密码登录 + 手机验证码登录）
|
||||
- ✅ 图形验证码防护
|
||||
- ✅ 会话管理与Token自动刷新
|
||||
- ✅ 登录日志记录（时间、IP、设备信息）
|
||||
- ✅ 安全退出登录
|
||||
- ✅ 权限动态分配
|
||||
|
||||
---
|
||||
|
||||
## 🚀 功能特性
|
||||
|
||||
### 1. **用户注册** 📝
|
||||
|
||||
**注册入口**: 点击登录页面底部"立即注册"
|
||||
|
||||
**必填信息**:
|
||||
- 用户名（3-20个字符，仅字母、数字、下划线）
|
||||
- 真实姓名（2-20个字符）
|
||||
- 手机号（11位手机号）
|
||||
- 短信验证码
|
||||
- 密码（至少6位）
|
||||
- 确认密码
|
||||
- 图形验证码
|
||||
|
||||
**可选信息**:
|
||||
- 邮箱
|
||||
|
||||
**注册流程**:
|
||||
1. 填写基本信息
|
||||
2. 点击"发送验证码"获取手机验证码
|
||||
3. 输入验证码和图形验证码
|
||||
4. 点击"立即注册"
|
||||
5. 注册成功后自动登录系统
|
||||
|
||||
**信息校验**:
|
||||
- ✅ 用户名唯一性验证
|
||||
- ✅ 手机号唯一性验证
|
||||
- ✅ 密码强度验证
|
||||
- ✅ 实时表单验证
|
||||
- ✅ 手机号格式验证
|
||||
|
||||
---
|
||||
|
||||
### 2. **用户登录** 🔑
|
||||
|
||||
#### **方式一：密码登录**
|
||||
|
||||
- 用户名 + 密码
|
||||
- 图形验证码
|
||||
|
||||
**测试账号**:
|
||||
```
|
||||
账号1：admin / admin123（系统管理员）
|
||||
账号2：zhangsan / zhang123（普通用户）
|
||||
```
|
||||
|
||||
#### **方式二：手机号登录**
|
||||
|
||||
- 手机号 + 短信验证码
|
||||
- 图形验证码
|
||||
|
||||
**测试手机号**:
|
||||
```
|
||||
手机1：13800138000（admin）
|
||||
手机2：13800138001（zhangsan）
|
||||
测试验证码：123456
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. **安全机制** 🛡️
|
||||
|
||||
#### **图形验证码**
|
||||
- 随机4位字符
|
||||
- 点击图片或刷新按钮可更换
|
||||
- 防止暴力破解
|
||||
|
||||
#### **会话管理**
|
||||
- Token有效期：24小时
|
||||
- 自动刷新机制
|
||||
- 过期后自动登出
|
||||
|
||||
#### **登录日志**
|
||||
系统自动记录：
|
||||
- 登录时间
|
||||
- 登录IP地址
|
||||
- 设备信息（设备类型、浏览器、操作系统）
|
||||
- 登录方式（密码/手机号）
|
||||
- 登录状态（成功/失败）
|
||||
|
||||
#### **数据加密**
|
||||
- Token加密存储
|
||||
- 密码加密传输（实际部署时）
|
||||
- LocalStorage安全存储
|
||||
|
||||
---
|
||||
|
||||
### 4. **用户权限** 👥
|
||||
|
||||
#### **角色类型**
|
||||
|
||||
**系统管理员（admin）**:
|
||||
- 权限：`*`（全部权限）
|
||||
- 可访问所有功能模块
|
||||
- 可管理用户和系统配置
|
||||
|
||||
**部门经理（manager）**:
|
||||
- 权限：`machinery:*`, `field:*`, `operation:*`
|
||||
- 可访问农机、地块、农事模块
|
||||
- 受限访问其他模块
|
||||
|
||||
**普通用户（user）**:
|
||||
- 权限：`machinery:view`, `field:view`, `operation:view`
|
||||
- 仅查看权限
|
||||
- 无法修改和删除
|
||||
|
||||
---
|
||||
|
||||
### 5. **退出登录** 🚪
|
||||
|
||||
**退出方式**:
|
||||
1. 点击右上角用户头像
|
||||
2. 选择"退出登录"
|
||||
3. 系统清除所有会话信息
|
||||
|
||||
**清除内容**:
|
||||
- ✅ Token
|
||||
- ✅ RefreshToken
|
||||
- ✅ 用户信息
|
||||
- ✅ 登录时间
|
||||
- ✅ Session ID
|
||||
|
||||
---
|
||||
|
||||
## 📊 系统架构
|
||||
|
||||
### **认证流程**
|
||||
|
||||
```
|
||||
┌─────────┐
|
||||
│ 用户访问 │
|
||||
└────┬────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────┐ 未登录 ┌──────────┐
|
||||
│ 检查登录状态 │──────────────>│ 登录页面 │
|
||||
└─────────────┘ └────┬─────┘
|
||||
│ │
|
||||
已登录 登录成功
|
||||
│ │
|
||||
▼ ▼
|
||||
┌─────────────┐ ┌──────────┐
|
||||
│ 检查Token │<─────────────│ 生成Token│
|
||||
└─────┬───────┘ └──────────┘
|
||||
│
|
||||
有效/刷新
|
||||
│
|
||||
▼
|
||||
┌─────────────┐
|
||||
│ 进入主系统 │
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
### **技术组件**
|
||||
|
||||
#### **1. AuthContext** (认证上下文)
|
||||
- 全局状态管理
|
||||
- 用户信息存储
|
||||
- Token管理
|
||||
- 登录/登出方法
|
||||
|
||||
#### **2. Login组件**
|
||||
- 双重登录方式
|
||||
- 图形验证码
|
||||
- 表单验证
|
||||
- 错误提示
|
||||
|
||||
#### **3. Register组件**
|
||||
- 用户注册表单
|
||||
- 实时验证
|
||||
- 手机验证码
|
||||
- 自动登录
|
||||
|
||||
#### **4. CaptchaInput组件**
|
||||
- 图形验证码生成
|
||||
- Canvas绘制
|
||||
- 随机刷新
|
||||
|
||||
#### **5. authStorage** (存储管理)
|
||||
- Mock用户数据库
|
||||
- 密码验证
|
||||
- 手机号验证
|
||||
- Token生成
|
||||
- 登录记录
|
||||
|
||||
---
|
||||
|
||||
## 🎯 使用示例
|
||||
|
||||
### **场景1：新用户注册**
|
||||
|
||||
```typescript
|
||||
// 用户填写注册表单
|
||||
{
|
||||
username: 'lisi',
|
||||
realName: '李四',
|
||||
phone: '13900139000',
|
||||
code: '123456', // 手机验证码
|
||||
password: 'lisi123',
|
||||
confirmPassword: 'lisi123',
|
||||
email: 'lisi@example.com',
|
||||
captcha: 'AB12' // 图形验证码
|
||||
}
|
||||
|
||||
// 系统验证
|
||||
1. 检查用户名是否已存在 ✓
|
||||
2. 检查手机号是否已注册 ✓
|
||||
3. 验证手机验证码 ✓
|
||||
4. 验证密码强度 ✓
|
||||
5. 创建用户账号 ✓
|
||||
6. 自动登录系统 ✓
|
||||
```
|
||||
|
||||
### **场景2：密码登录**
|
||||
|
||||
```typescript
|
||||
// 用户输入
|
||||
{
|
||||
username: 'admin',
|
||||
password: 'admin123',
|
||||
captcha: 'XY56'
|
||||
}
|
||||
|
||||
// 系统处理
|
||||
1. 验证图形验证码 ✓
|
||||
2. 查找用户 ✓
|
||||
3. 验证密码 ✓
|
||||
4. 生成Token ✓
|
||||
5. 记录登录日志 ✓
|
||||
6. 更新最后登录信息 ✓
|
||||
7. 进入系统 ✓
|
||||
```
|
||||
|
||||
### **场景3：手机号登录**
|
||||
|
||||
```typescript
|
||||
// 用户输入
|
||||
{
|
||||
phone: '13800138000',
|
||||
code: '123456',
|
||||
captcha: 'MN89'
|
||||
}
|
||||
|
||||
// 系统处理
|
||||
1. 验证手机号格式 ✓
|
||||
2. 验证图形验证码 ✓
|
||||
3. 验证短信验证码 ✓
|
||||
4. 查找用户 ✓
|
||||
5. 生成Token ✓
|
||||
6. 记录登录日志 ✓
|
||||
7. 进入系统 ✓
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔒 安全最佳实践
|
||||
|
||||
### **开发环境（当前）**
|
||||
- ✅ Mock数据库
|
||||
- ✅ LocalStorage存储
|
||||
- ✅ 测试验证码固定为123456
|
||||
- ✅ 密码明文存储（仅测试）
|
||||
|
||||
### **生产环境（建议）**
|
||||
- 🔐 使用真实数据库
|
||||
- 🔐 密码bcrypt加密
|
||||
- 🔐 HTTPS加密传输
|
||||
- 🔐 真实短信服务
|
||||
- 🔐 HttpOnly Cookie存储Token
|
||||
- 🔐 CSRF防护
|
||||
- 🔐 验证码有效期管理
|
||||
- 🔐 登录失败次数限制
|
||||
- 🔐 IP黑名单机制
|
||||
|
||||
---
|
||||
|
||||
## 📱 界面展示
|
||||
|
||||
### **登录页面**
|
||||
- 🎨 绿色农业主题
|
||||
- 🎨 渐变背景
|
||||
- 🎨 双Tab切换（密码/手机号）
|
||||
- 🎨 图形验证码
|
||||
- 🎨 安全提示
|
||||
|
||||
### **注册页面**
|
||||
- 📝 完整表单验证
|
||||
- 📝 实时错误提示
|
||||
- 📝 密码强度提示
|
||||
- 📝 注册说明
|
||||
|
||||
### **用户菜单**
|
||||
- 👤 用户头像
|
||||
- 👤 基本信息展示
|
||||
- 👤 个人中心入口
|
||||
- 👤 退出登录
|
||||
|
||||
---
|
||||
|
||||
## 🎉 快速开始
|
||||
|
||||
### **1. 测试登录**
|
||||
```
|
||||
访问系统 → 使用测试账号登录 → 进入主系统
|
||||
```
|
||||
|
||||
### **2. 测试注册**
|
||||
```
|
||||
访问系统 → 点击"立即注册" → 填写信息 → 获取验证码 → 注册成功
|
||||
```
|
||||
|
||||
### **3. 测试登出**
|
||||
```
|
||||
进入系统 → 点击右上角用户名 → 选择"退出登录"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🆘 常见问题
|
||||
|
||||
**Q: 忘记密码怎么办？**
|
||||
A: 当前版本暂不支持密码找回，请联系管理员重置。
|
||||
|
||||
**Q: 验证码收不到？**
|
||||
A: 测试环境使用固定验证码：123456
|
||||
|
||||
**Q: 为什么会自动退出？**
|
||||
A: Token有效期为24小时，过期后会自动退出。
|
||||
|
||||
**Q: 可以同时登录多个设备吗？**
|
||||
A: 可以，每个设备独立维护会话。
|
||||
|
||||
**Q: 如何查看登录记录？**
|
||||
A: 管理员可在"中心配置管理 → 日志管理 → 登录日志"查看。
|
||||
|
||||
---
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
- 📧 邮箱：support@agriculture.com
|
||||
- 📱 电话：400-xxx-xxxx
|
||||
- 💬 在线客服：工作日 9:00-18:00
|
||||
|
||||
---
|
||||
|
||||
**系统版本**: v1.0.0
|
||||
**更新日期**: 2024-10-15
|
||||
**文档作者**: 智慧农业开发团队
|
||||
Reference in New Issue
Block a user