ai-swap/frontend/README_AUTH.md

AI换脸换装系统 - 前端认证系统

概述

本前端系统已完全弃用Base44的用户登录验证功能，改为使用传统的用户名密码登录系统，与后端API紧密集成。

认证系统架构

1. API模块 (src/api/auth.js)

• 封装所有与后端认证相关的API调用
• 使用axios进行HTTP请求
• 统一的错误处理和响应格式
• 自动处理token存储和清理

2. 认证上下文 (src/contexts/AuthContext.jsx)

• 使用React Context API进行全局状态管理
• 提供登录、登出、用户信息管理等功能
• 自动处理token存储和清理
• 与后端API紧密集成

3. 登录页面 (src/pages/LoginPage.jsx)

• 使用Ant Design表单组件构建专业登录界面
• 通过AuthContext调用后端登录API
• 表单验证和错误处理
• 登录成功后自动跳转到仪表盘

4. 注册页面 (src/pages/RegisterPage.jsx)

• 使用Ant Design表单组件构建专业注册界面
• 通过AuthContext调用后端注册API
• 表单验证和错误处理
• 注册成功后跳转到登录页面

主要功能

用户登录

• 用户名密码验证
• 表单验证（用户名至少3个字符，密码至少6个字符）
• 登录状态持久化
• 自动跳转到仪表盘

用户注册

• 用户名密码注册
• 密码确认验证
• 用户名格式验证（只能包含字母、数字和下划线）
• 注册成功后跳转到登录页面

用户登出

• 清除本地存储的认证信息
• 调用后端登出API
• 重定向到登录页面

路由保护

• 未认证用户自动重定向到登录页面
• 已认证用户访问登录/注册页面时重定向到仪表盘
• 加载状态显示

API接口

登录接口

• URL: POST /auth/login
• 参数: { username, password }
• 响应: { success: true, token, user }

注册接口

• URL: POST /auth/register
• 参数: { username, password, is_admin }
• 响应: { success: true }

登出接口

• URL: POST /auth/logout
• 参数: { token }
• 响应: { success: true }

技术栈

• React 18: 前端框架
• React Router: 路由管理
• Ant Design: UI组件库
• Axios: HTTP客户端
• Context API: 状态管理

文件结构

src/
├── api/
│   └── auth.js              # 认证相关API
├── contexts/
│   └── AuthContext.jsx      # 认证上下文
├── pages/
│   ├── LoginPage.jsx        # 登录页面
│   ├── RegisterPage.jsx     # 注册页面
│   └── index.jsx           # 路由配置
├── components/
│   ├── auth/
│   │   └── UserProfile.jsx  # 用户资料组件
│   └── ui/
│       └── loading.jsx      # 加载组件
└── App.jsx                  # 应用入口

使用说明

1. 启动开发服务器: bash npm run dev 2. 访问应用: - 首次访问会自动重定向到登录页面 - 注册新用户或使用现有账户登录 - 登录成功后进入仪表盘 3. 环境变量: - 设置 VITE_API_BASE_URL 环境变量指向后端API地址 - 默认为 http://localhost:8000 ## 安全特性 - Token自动管理 - 401错误自动重定向到登录页面 - 密码加密传输 - 表单验证和错误处理 - 用户会话管理 ## 注意事项 - 确保后端API服务正在运行 - 检查网络连接和API地址配置 - 用户信息存储在localStorage中 - 支持离线模式（使用本地存储的用户信息）