MBE Desktop - API 集成测试指南
测试日期: 2026-02-07
测试范围: Token 自动刷新、Dashboard 真实数据、API 端点对接
一、测试前准备
1. 环境检查
# 确保 Node.js 版本 >= 18
node --version
# 确保已安装依赖
cd d:\Mises\mbe-desktop
npm install
# 检查 .env 文件配置
cat .env
2. 后端服务检查
确保后端 API 服务正在运行：
- 开发环境:
https://mbe-dev.hi-maker.com - 健康检查:
https://mbe-dev.hi-maker.com/api/health
3. 启动应用
# 启动开发模式（Electron + Vite 热重载）
npm run dev:electron
二、测试清单
✅ 测试 1: 用户登录
目标: 验证登录功能和 Token 保存
步骤:
- 打开应用，进入登录页面
- 输入有效的邮箱和密码
- 点击"登录"按钮
预期结果:
- ✅ 登录成功，跳转到 Dashboard
- ✅ 浏览器控制台显示:
[API] Token saved - ✅
localStorage中有mbe_access_token和mbe_refresh_token - ✅ 用户信息正确显示在 Dashboard
检查点:
// 在浏览器控制台执行
localStorage.getItem('mbe_access_token')
localStorage.getItem('mbe_refresh_token')
失败处理:
- 检查后端服务是否运行
- 检查网络连接
- 查看控制台错误信息
✅ 测试 2: Token 自动刷新（过期前刷新）
目标: 验证 Token 在过期前自动刷新
步骤:
- 登录成功后，打开浏览器开发者工具（F12）
- 切换到 Console 标签
- 在控制台执行以下代码修改 Token 过期时间（模拟即将过期）:
// 获取当前 Token
const token = localStorage.getItem('mbe_access_token')
// 解码 Token（仅用于测试）
const payload = JSON.parse(atob(token.split('.')[1]))
console.log('Token expires at:', new Date(payload.exp * 1000))
// 修改 Token 过期时间为 4 分钟后（小于 5 分钟阈值）
payload.exp = Math.floor(Date.now() / 1000) + 4 * 60
const newToken = token.split('.')[0] + '.' + btoa(JSON.stringify(payload)) + '.' + token.split('.')[2]
localStorage.setItem('mbe_access_token', newToken)
console.log('Token modified, expires in 4 minutes')
- 在 Dashboard 页面点击"刷新"或切换标签页（触发 API 请求）
预期结果:
- ✅ 控制台显示:
[API] Token expires in XXXs, refreshing... - ✅ 控制台显示:
[API] Token refreshed successfully - ✅ 新的 Token 保存到
localStorage - ✅ API 请求成功，无 401 错误
检查点:
// 检查 Token 是否已刷新
const oldToken = token
const newToken = localStorage.getItem('mbe_access_token')
console.log('Token changed:', oldToken !== newToken)
✅ 测试 3: Token 自动刷新（401 错误触发）
目标: 验证 401 错误时自动刷新 Token
步骤:
- 登录成功后，手动将 Token 设置为无效值:
localStorage.setItem('mbe_access_token', 'invalid_token')
- 在 Dashboard 页面执行任何操作（如刷新数据、切换标签）
预期结果:
- ✅ 控制台显示:
[API] Token refresh failed或[API] Token refreshed successfully - ✅ 如果刷新成功，请求自动重试
- ✅ 如果刷新失败，显示登录过期提示
✅ 测试 4: Dashboard 数据加载
目标: 验证 Dashboard 使用真实后端数据
步骤:
- 登录成功后，进入 Dashboard
- 观察页面加载状态
- 检查各个数据卡片和图表
预期结果:
- ✅ 显示加载骨架屏（LoadingSkeleton）
- ✅ 数据加载完成后显示真实数据:
- API 调用次数
- Token 使用量
- 费用统计
- API 密钥数量
- ✅ 图表显示真实趋势数据（如果有）
- ✅ 调用日志显示真实记录（如果有）
检查点:
- 打开浏览器开发者工具 → Network 标签
- 查看 API 请求:
GET /api/v1/users/dashboard/statsGET /api/v1/users/usageGET /api/health
- 确认请求返回 200 状态码
- 确认响应数据格式正确
失败处理:
- 如果显示错误提示，点击"重试"按钮
- 检查后端 API 是否正常
- 查看控制台错误信息
✅ 测试 5: API Key 管理
目标: 验证 API Key 的创建和管理
步骤:
- 在 Dashboard 切换到"API 密钥"标签
- 点击"创建新密钥"按钮
- 输入密钥名称（可选）
- 确认创建
- 尝试删除或禁用密钥
预期结果:
- ✅ 密钥列表正确显示
- ✅ 创建密钥成功，显示完整密钥（仅一次）
- ✅ 删除/禁用操作成功
- ✅ 列表自动刷新
检查点:
// 检查 API Key 列表
// Network 标签中查看:
// POST /api/v1/users/api-key
// DELETE /api/v1/users/api-key/{id}
✅ 测试 6: 错误处理
目标: 验证错误处理和用户提示
步骤:
网络断开测试:
- 断开网络连接
- 尝试刷新 Dashboard 数据
无效 Token 测试:
- 清除
localStorage中的 Token - 尝试访问需要认证的页面
- 清除
后端错误测试:
- 修改 API URL 为无效地址
- 尝试登录或加载数据
预期结果:
- ✅ 网络错误时显示友好的错误提示
- ✅ 提供"重试"按钮
- ✅ Token 无效时自动跳转到登录页
- ✅ 控制台记录详细错误信息（便于调试）
✅ 测试 7: 并发请求和 Token 刷新
目标: 验证多个并发请求时 Token 刷新不会重复
步骤:
- 登录成功后，修改 Token 为即将过期状态（参考测试 2）
- 同时触发多个 API 请求（如快速切换 Dashboard 标签）
预期结果:
- ✅ 控制台只显示一次 Token 刷新日志
- ✅ 所有请求共享同一个刷新操作
- ✅ 所有请求最终都成功
检查点:
// 在控制台观察日志
// 应该只看到一次: "[API] Token refreshed successfully"
// 不应该看到多次刷新
✅ 测试 8: 自动登录（Token 持久化）
目标: 验证应用重启后自动登录
步骤:
- 登录成功后，关闭应用
- 重新启动应用
预期结果:
- ✅ 应用启动时自动验证 Token
- ✅ Token 有效时自动登录，显示 Dashboard
- ✅ Token 无效时跳转到登录页
检查点:
// 检查 authStore 的 initializeAuth 是否被调用
// 检查 Token 是否从 localStorage 恢复
三、测试工具和技巧
1. 浏览器开发者工具
打开方式:
- Windows/Linux:
F12或Ctrl+Shift+I - macOS:
Cmd+Option+I
关键标签:
- Console: 查看日志和错误
- Network: 查看 API 请求和响应
- Application → Local Storage: 查看存储的 Token
2. 有用的控制台命令
// 查看当前 Token
localStorage.getItem('mbe_access_token')
// 查看 Token 过期时间
const token = localStorage.getItem('mbe_access_token')
const payload = JSON.parse(atob(token.split('.')[1]))
console.log('Expires at:', new Date(payload.exp * 1000))
console.log('Time until expiry:', Math.round((payload.exp * 1000 - Date.now()) / 1000), 'seconds')
// 清除所有 Token（模拟登出）
localStorage.removeItem('mbe_access_token')
localStorage.removeItem('mbe_refresh_token')
// 模拟 Token 即将过期（4 分钟后）
const token = localStorage.getItem('mbe_access_token')
const parts = token.split('.')
const payload = JSON.parse(atob(parts[1]))
payload.exp = Math.floor(Date.now() / 1000) + 4 * 60
const newToken = parts[0] + '.' + btoa(JSON.stringify(payload)) + '.' + parts[2]
localStorage.setItem('mbe_access_token', newToken)
console.log('Token modified to expire in 4 minutes')
3. 网络请求监控
在 Network 标签中过滤:
XHR或Fetch- 查看 API 请求- 搜索
/api/v1/users- 过滤用户相关请求 - 查看请求头中的
Authorization: Bearer xxx - 查看响应状态码和内容
四、常见问题和解决方案
问题 1: 登录后立即显示 401 错误
可能原因:
- Token 格式不正确
- 后端认证中间件配置问题
- CORS 问题
解决方案:
- 检查 Network 标签中的请求头
- 确认
Authorization: Bearer xxx格式正确 - 检查后端日志
问题 2: Token 刷新失败
可能原因:
- Refresh Token 已过期
- 后端刷新端点返回错误
- 网络问题
解决方案:
- 检查控制台错误信息
- 检查 Network 标签中的刷新请求
- 确认 Refresh Token 存在且有效
问题 3: Dashboard 数据为空
可能原因:
- 后端 API 返回空数据
- 数据格式不匹配
- API 端点错误
解决方案:
- 检查 Network 标签中的响应数据
- 确认后端 API 正常工作
- 检查
dashboardService.ts中的数据适配逻辑
问题 4: 应用无法启动
可能原因:
- 依赖未安装
- 端口被占用
- 编译错误
解决方案:
# 重新安装依赖
npm install
# 清理并重新构建
rm -rf dist node_modules
npm install
npm run build
# 检查端口占用
netstat -ano | findstr :5173 # Windows
lsof -i :5173 # macOS/Linux
五、测试报告模板
测试结果记录
| 测试项 | 状态 | 备注 |
|---|---|---|
| 用户登录 | ⬜ 通过 / ⬜ 失败 | |
| Token 过期前刷新 | ⬜ 通过 / ⬜ 失败 | |
| Token 401 触发刷新 | ⬜ 通过 / ⬜ 失败 | |
| Dashboard 数据加载 | ⬜ 通过 / ⬜ 失败 | |
| API Key 管理 | ⬜ 通过 / ⬜ 失败 | |
| 错误处理 | ⬜ 通过 / ⬜ 失败 | |
| 并发请求刷新 | ⬜ 通过 / ⬜ 失败 | |
| 自动登录 | ⬜ 通过 / ⬜ 失败 |
发现的问题
- 问题描述:
- 复现步骤:
- 预期行为:
- 实际行为:
- 截图/日志:
六、下一步
测试完成后，根据结果:
- ✅ 修复发现的问题
- ✅ 更新文档
- ✅ 准备发布
最后更新: 2026-02-07