# 🧪 餐厅管理系统登录模块测试指南

## 📋 系统概述

已成功创建完整的登录系统，包含以下核心功能：

- 用户登录（支持三种用户类型）
- 用户注册
- 密码修改
- 路由守卫和权限控制
- 统一错误处理
- Axios请求拦截器

## 🎯 已实现的功能模块

### 1. 认证页面

- ✅ **登录页面** (`/login`) - 支持客户/商户/管理员三种类型登录
- ✅ **注册页面** (`/register`) - 完整的用户注册流程
- ✅ **修改密码页面** (`/change-password`) - 安全的密码修改功能
- ✅ **错误页面** (`/error`) - 统一的错误处理页面

### 2. 路由系统

- ✅ **路由守卫** - 自动检查登录状态和权限
- ✅ **权限控制** - 根据用户类型限制访问
- ✅ **自动重定向** - 登录后跳转到对应模块

### 3. 状态管理

- ✅ **Pinia Store** - 统一的认证状态管理
- ✅ **本地存储** - Token和用户信息持久化
- ✅ **状态同步** - 页面刷新后状态恢复

### 4. 网络请求

- ✅ **Axios拦截器** - 自动添加认证头
- ✅ **错误处理** - 统一处理HTTP错误
- ✅ **Token管理** - 自动Token验证和清理

## 🔍 测试步骤

### 基础功能测试

#### 1. 访问登录页面

```
访问地址: http://localhost:5173
预期结果: 自动重定向到 /login 页面
```

#### 2. 测试用户类型选择

- 点击不同的用户类型标签（客户/商户/管理员）
- 验证UI界面切换正常

#### 3. 测试表单验证

- **用户名验证**：

  - 输入少于3个字符 → 显示错误提示
  - 输入特殊字符 → 显示错误提示
  - 输入正确格式 → 验证通过

- **密码验证**：
  - 输入少于8个字符 → 显示错误提示
  - 输入纯数字或纯字母 → 显示错误提示
  - 输入包含字母和数字 → 验证通过

#### 4. 测试注册功能

```
访问地址: http://localhost:5173/register
测试数据:
- 用户名: testuser123
- 密码: password123
- 确认密码: password123
- 手机号: 13812345678
- 用户类型: customer
- 性别: male
```

#### 5. 测试登录功能

使用API文档中的示例数据进行登录测试：

```
用户名: zhangsan
密码: password123
用户类型: customer
```

### 路由权限测试

#### 1. 未登录状态测试

- 直接访问 `/admin` → 应跳转到错误页面
- 直接访问 `/merchant` → 应跳转到错误页面
- 直接访问 `/user` → 应跳转到错误页面

#### 2. 权限控制测试

- 客户身份登录后访问 `/admin` → 应显示权限不足错误
- 商户身份登录后访问 `/admin` → 应显示权限不足错误
- 管理员身份登录后 → 可以访问所有模块

#### 3. 自动重定向测试

- 客户登录成功 → 自动跳转到 `/user`
- 商户登录成功 → 自动跳转到 `/merchant`
- 管理员登录成功 → 自动跳转到 `/admin`

### 错误处理测试

#### 1. 网络错误测试

- 关闭后端服务器
- 尝试登录 → 应跳转到网络错误页面

#### 2. 认证错误测试

- 使用错误的用户名/密码 → 显示登录失败消息
- Token过期 → 自动跳转到认证错误页面

#### 3. 404错误测试

- 访问不存在的路径 → 应跳转到404错误页面

## 🔧 API接口测试

### 1. 登录接口测试

```bash
curl -X POST http://localhost:8080/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "accountName": "zhangsan",
    "accountPassword": "password123"
  }'
```

### 2. 注册接口测试

```bash
curl -X POST http://localhost:8080/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{
    "accountName": "testuser123",
    "accountPassword": "password123",
    "confirmPassword": "password123",
    "accountPhone": "13812345678",
    "accountType": "customer",
    "accountGender": "male"
  }'
```

### 3. 获取当前用户接口测试

```bash
curl -X GET http://localhost:8080/api/auth/current-user \
  -H "Authorization: Bearer YOUR_TOKEN_HERE"
```

## 🐛 常见问题排查

### 1. 页面无法访问

- 检查开发服务器是否启动：`npm run dev`
- 检查端口是否被占用
- 检查控制台是否有JavaScript错误

### 2. 登录失败

- 确认后端服务器运行在 `http://localhost:8080`
- 检查API接口是否可访问
- 查看浏览器开发者工具的Network标签

### 3. 权限问题

- 检查用户类型是否正确
- 确认Token是否正确保存在localStorage
- 验证路由守卫配置

### 4. 样式问题

- 确认Element Plus正确安装和导入
- 检查CSS样式是否正确加载
- 验证图标组件是否正确注册

## 📱 响应式设计测试

### 移动端测试

- 使用Chrome开发者工具切换到移动设备视图
- 测试不同屏幕尺寸下的页面布局
- 验证触摸操作的可用性

### 平板端测试

- 测试中等尺寸屏幕的适配
- 验证表单元素的布局

## 🔒 安全性测试

### 1. XSS防护测试

- 在表单中输入脚本代码
- 验证是否被正确转义

### 2. Token安全测试

- 检查Token是否正确存储
- 验证Token过期处理
- 测试退出登录后Token清理

### 3. 路由安全测试

- 尝试直接访问受保护的路由
- 验证权限检查是否生效

## 📊 性能测试

### 1. 页面加载速度

- 测试首屏加载时间
- 验证资源懒加载是否正常

### 2. 网络请求优化

- 检查是否有重复请求
- 验证请求拦截器性能

## 🎨 用户体验测试

### 1. 交互反馈

- 点击按钮时的加载状态
- 表单验证的即时反馈
- 错误消息的友好提示

### 2. 视觉设计

- 颜色搭配和对比度
- 字体大小和可读性
- 图标和按钮的直观性

## 📝 测试清单

- [ ] 登录页面正常显示
- [ ] 用户类型选择器工作正常
- [ ] 表单验证规则生效
- [ ] 注册功能完整可用
- [ ] 登录成功后正确跳转
- [ ] 路由守卫正确拦截
- [ ] 权限控制按预期工作
- [ ] 错误页面正确显示
- [ ] Token自动添加到请求头
- [ ] 网络错误正确处理
- [ ] 移动端适配良好
- [ ] 密码修改功能正常
- [ ] 退出登录清理状态

## 🚀 部署前检查

1. **代码质量**

   - 运行 `npm run type-check` 检查TypeScript类型
   - 运行 `npm run format` 格式化代码

2. **构建测试**

   - 运行 `npm run build` 构建生产版本
   - 检查构建产物是否正常

3. **环境配置**
   - 确认API地址配置正确
   - 检查生产环境的安全设置

---

## 🎯 总结

登录系统已完整实现，包含了现代Web应用所需的所有核心功能：

- ✅ 完整的用户认证流程
- ✅ 细粒度的权限控制
- ✅ 优雅的错误处理
- ✅ 现代化的UI设计
- ✅ 良好的用户体验
- ✅ 安全的Token管理

系统已准备好投入使用！🎉
