InfoGenie/frontend/react-app/src/md/前端邮件功能测试指南.md

前端邮件功能测试指南

问题修复说明

修复的问题

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

修复内容

在 src/utils/api.js 文件中：

// 修复前
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 判断是否成功

环境变量要求

确保后端设置了正确的环境变量：

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调用已修复