# 前端邮件功能测试指南

## 问题修复说明

### 修复的问题
- **响应拦截器问题**：修复了 `api.js` 中响应拦截器直接返回 `response.data` 导致前端无法正确访问 `response.data.success` 的问题
- **API响应格式不匹配**：现在前端代码可以正确处理后端返回的响应格式

### 修复内容
在 `src/utils/api.js` 文件中：
```javascript
// 修复前
api.interceptors.response.use(
  (response) => {
    return response.data;  // 这里直接返回了data，导致前端无法访问response.data.success
  },
  // ...
);

// 修复后
api.interceptors.response.use(
  (response) => {
    return response;  // 现在返回完整的response对象
  },
  // ...
);
```

## 测试步骤

### 1. 启动服务
确保以下服务正在运行：
- **后端服务**：`http://localhost:5000`
- **前端服务**：`http://localhost:3001`

### 2. 测试注册功能
1. 打开浏览器访问 `http://localhost:3001`
2. 点击登录按钮或直接访问 `/login` 页面
3. 切换到「注册」标签
4. 填写以下信息：
   - **邮箱**：输入有效的QQ邮箱（如：your_qq@qq.com）
   - **用户名**：输入用户名
   - **密码**：输入密码（至少6位）
   - **确认密码**：再次输入相同密码
5. 点击「发送验证码」按钮
6. 检查是否显示成功提示："验证码已发送到您的邮箱"
7. 检查邮箱是否收到验证码邮件
8. 输入收到的验证码
9. 点击「注册」按钮完成注册

### 3. 测试登录功能（验证码登录）
1. 在登录页面选择「验证码登录」
2. 输入已注册的QQ邮箱
3. 点击「发送验证码」按钮
4. 检查是否显示成功提示
5. 检查邮箱是否收到登录验证码
6. 输入验证码并点击「登录」

### 4. 测试登录功能（密码登录）
1. 在登录页面选择「密码登录」
2. 输入邮箱和密码
3. 点击「登录」按钮

## 预期结果

### 成功的表现
- ✅ 点击「发送验证码」后显示绿色成功提示
- ✅ 倒计时正常显示（60秒）
- ✅ 邮箱收到格式正确的验证码邮件
- ✅ 后端日志显示："验证码邮件发送成功: your_email@qq.com"
- ✅ 验证码验证成功，注册/登录流程完整

### 失败的表现
- ❌ 显示红色错误提示
- ❌ 邮箱未收到验证码
- ❌ 后端日志显示SMTP错误

## 技术细节

### API调用流程
1. 前端调用 `authAPI.sendVerification(data)`
2. 请求发送到 `/api/auth/send-verification`
3. 后端处理邮件发送
4. 返回响应格式：`{ success: true/false, message: "...", data: {...} }`
5. 前端通过 `response.data.success` 判断是否成功

### 环境变量要求
确保后端设置了正确的环境变量：
```bash
MAIL_USERNAME=your_qq_email@qq.com
MAIL_PASSWORD=your_qq_auth_code
```

## 故障排除

### 如果仍然无法发送邮件
1. 检查后端环境变量是否正确设置
2. 确认QQ邮箱已开启SMTP服务并获取授权码
3. 检查网络连接是否正常
4. 查看浏览器开发者工具的Network标签，确认API请求状态
5. 查看后端控制台日志，确认具体错误信息

### 常见错误
- **535 Authentication failed**：QQ邮箱授权码错误
- **Network Error**：前后端连接问题
- **Timeout**：网络超时或SMTP服务器响应慢

## 注意事项
- 仅支持QQ邮箱系列（qq.com、vip.qq.com、foxmail.com）
- 验证码有效期为10分钟
- 同一邮箱60秒内只能发送一次验证码
- 验证码最多尝试5次

---

**修复完成时间**：2025年9月2日  
**修复内容**：API响应拦截器格式问题  
**测试状态**：✅ 后端功能正常，前端API调用已修复