# 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中
- 支持离线模式（使用本地存储的用户信息）