cavin/smart-crop-ui

Fork 0

Files

peng ec58562661 提交1 bmad搭建与项目启动 - ok

2025-10-17 17:24:56 +08:00

7.4 KiB

Raw Blame History

🔐 注册登录系统使用指南

✨ 系统概述

智慧农业生产管理系统已集成完整的用户认证授权功能，支持：

✅ 用户注册与登录
✅ 双重认证方式（密码登录 + 手机验证码登录）
✅ 图形验证码防护
✅ 会话管理与Token自动刷新
✅ 登录日志记录（时间、IP、设备信息）
✅ 安全退出登录
✅ 权限动态分配

🚀 功能特性

1. 用户注册 📝

注册入口: 点击登录页面底部"立即注册"

必填信息:

用户名（3-20个字符，仅字母、数字、下划线）
真实姓名（2-20个字符）
手机号（11位手机号）
短信验证码
密码（至少6位）
确认密码
图形验证码

可选信息:

邮箱

注册流程:

填写基本信息
点击"发送验证码"获取手机验证码
输入验证码和图形验证码
点击"立即注册"
注册成功后自动登录系统

信息校验:

✅ 用户名唯一性验证
✅ 手机号唯一性验证
✅ 密码强度验证
✅ 实时表单验证
✅ 手机号格式验证

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. 退出登录 🚪

退出方式:

点击右上角用户头像
选择"退出登录"
系统清除所有会话信息

清除内容:

✅ Token
✅ RefreshToken
✅ 用户信息
✅ 登录时间
✅ Session ID

📊 系统架构

认证流程

┌─────────┐
│ 用户访问 │
└────┬────┘
     │
     ▼
┌─────────────┐    未登录    ┌──────────┐
│ 检查登录状态 │──────────────>│ 登录页面 │
└─────────────┘              └────┬─────┘
     │                            │
  已登录                      登录成功
     │                            │
     ▼                            ▼
┌─────────────┐              ┌──────────┐
│ 检查Token   │<─────────────│ 生成Token│
└─────┬───────┘              └──────────┘
      │
   有效/刷新
      │
      ▼
┌─────────────┐
│ 进入主系统  │
└─────────────┘

技术组件

1. AuthContext (认证上下文)

全局状态管理
用户信息存储
Token管理
登录/登出方法

2. Login组件

双重登录方式
图形验证码
表单验证
错误提示

3. Register组件

用户注册表单
实时验证
手机验证码
自动登录

4. CaptchaInput组件

图形验证码生成
Canvas绘制
随机刷新

5. authStorage (存储管理)

Mock用户数据库
密码验证
手机号验证
Token生成
登录记录

🎯 使用示例

场景1：新用户注册

// 用户填写注册表单
{
  username: 'lisi',
  realName: '李四',
  phone: '13900139000',
  code: '123456',        // 手机验证码
  password: 'lisi123',
  confirmPassword: 'lisi123',
  email: 'lisi@example.com',
  captcha: 'AB12'        // 图形验证码
}

// 系统验证
1. 检查用户名是否已存在 ✓
2. 检查手机号是否已注册 ✓
3. 验证手机验证码 ✓
4. 验证密码强度 ✓
5. 创建用户账号 ✓
6. 自动登录系统 ✓

场景2：密码登录

// 用户输入
{
  username: 'admin',
  password: 'admin123',
  captcha: 'XY56'
}

// 系统处理
1. 验证图形验证码 ✓
2. 查找用户 ✓
3. 验证密码 ✓
4. 生成Token ✓
5. 记录登录日志 ✓
6. 更新最后登录信息 ✓
7. 进入系统 ✓

场景3：手机号登录

// 用户输入
{
  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
文档作者: 智慧农业开发团队

7.4 KiB Raw Blame History Unescape Escape