118 lines
3.6 KiB
Markdown
118 lines
3.6 KiB
Markdown
# 前端邮件功能测试指南
|
||
|
||
## 问题修复说明
|
||
|
||
### 修复的问题
|
||
- **响应拦截器问题**：修复了 `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调用已修复 |