forked from 77media/video-flow
154 lines
3.6 KiB
Markdown
154 lines
3.6 KiB
Markdown
# OAuth 回调页面跳转问题修复总结
|
||
|
||
## 🚨 问题描述
|
||
|
||
用户反馈：调用后端 `api/oauth/google` 接口返回成功，但前端成功后没有跳转到 `/movies` 页面。
|
||
|
||
## 🔍 问题根因分析
|
||
|
||
### 后端实际返回格式：
|
||
```json
|
||
{
|
||
"code": 0,
|
||
"message": "ok",
|
||
"data": {
|
||
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
|
||
"user": {
|
||
"userId": "0a005fe7181e40baafdd80ce3c2ce98d",
|
||
"userName": "Zixin Zhou",
|
||
"name": "Zixin Zhou",
|
||
"email": "codecaesar2020@gmail.com",
|
||
"authType": "GOOGLE",
|
||
"avatar": "https://lh3.googleusercontent.com/a/ACg8ocLS9E_7EIntgaxYFuczaU3laxooRltg2JIbnzc6osnANS8beL8=s96-c",
|
||
"isNewUser": false
|
||
},
|
||
"message": "Google OAuth successful"
|
||
},
|
||
"successful": true
|
||
}
|
||
```
|
||
|
||
### 前端原来期望的格式：
|
||
```typescript
|
||
interface GoogleOAuthResponse {
|
||
success: boolean; // ❌ 后端用的是 successful
|
||
data: { ... };
|
||
message?: string;
|
||
}
|
||
```
|
||
|
||
### 关键问题：
|
||
1. **字段名不匹配**：后端用 `successful: true`，前端检查 `success`
|
||
2. **状态码处理**：后端用 `code: 0` 表示成功，前端没有处理
|
||
3. **成功判断逻辑错误**：导致成功的响应被当作失败处理
|
||
|
||
## 🔧 修复方案
|
||
|
||
### 1. 更新响应类型定义
|
||
|
||
**修改前**：
|
||
```typescript
|
||
interface GoogleOAuthResponse {
|
||
success: boolean;
|
||
data: { ... };
|
||
message?: string;
|
||
}
|
||
```
|
||
|
||
**修改后**：
|
||
```typescript
|
||
interface GoogleOAuthResponse {
|
||
code: number;
|
||
message: string;
|
||
data: {
|
||
token: string;
|
||
user: { ... };
|
||
message: string;
|
||
};
|
||
successful: boolean;
|
||
}
|
||
```
|
||
|
||
### 2. 修复成功判断逻辑
|
||
|
||
**修改前**：
|
||
```typescript
|
||
if (!response.ok || !result.success) {
|
||
// 错误处理
|
||
}
|
||
```
|
||
|
||
**修改后**：
|
||
```typescript
|
||
// 根据后端实际返回格式判断成功状态
|
||
// 后端返回: { code: 0, successful: true } 表示成功
|
||
const isSuccess = response.ok && result.successful && result.code === 0;
|
||
|
||
if (!isSuccess) {
|
||
// 错误处理
|
||
}
|
||
```
|
||
|
||
### 3. 增强调试日志
|
||
|
||
添加了详细的调试日志来跟踪整个流程：
|
||
- 后端返回的完整数据
|
||
- 成功状态判断
|
||
- localStorage 数据保存
|
||
- 跳转准备和执行
|
||
|
||
## 📋 修改的文件
|
||
|
||
- **`app/users/oauth/callback/page.tsx`**
|
||
- 更新了 `GoogleOAuthResponse` 接口定义
|
||
- 修复了成功状态判断逻辑
|
||
- 增加了详细的调试日志
|
||
- 保持了2秒延迟跳转到 `/movies` 的逻辑
|
||
|
||
## 🧪 测试验证
|
||
|
||
修复后的流程应该是：
|
||
|
||
1. **接收后端响应**：
|
||
```
|
||
🔍 后端返回的完整数据: { code: 0, successful: true, ... }
|
||
```
|
||
|
||
2. **成功状态判断**：
|
||
```
|
||
🎉 Google OAuth成功: { userId: "...", email: "...", code: 0, successful: true }
|
||
```
|
||
|
||
3. **数据保存**：
|
||
```
|
||
💾 保存用户数据到 localStorage: { userId: "...", userName: "...", ... }
|
||
🔑 保存 token 到 localStorage
|
||
```
|
||
|
||
4. **跳转准备**：
|
||
```
|
||
⏰ 准备在2秒后跳转到 /movies
|
||
🚀 开始跳转到: /movies
|
||
```
|
||
|
||
## 🎯 预期结果
|
||
|
||
修复后，当后端返回成功响应时：
|
||
1. 前端能正确识别成功状态
|
||
2. 用户数据和 token 正确保存到 localStorage
|
||
3. 2秒后自动跳转到 `/movies` 页面
|
||
4. 控制台显示详细的调试信息
|
||
|
||
## 🔄 回滚方案
|
||
|
||
如果修复后出现问题，可以：
|
||
1. 恢复原来的接口定义
|
||
2. 联系后端开发者统一响应格式
|
||
3. 或者在前端做兼容性处理
|
||
|
||
## 📝 注意事项
|
||
|
||
- 这次修复是基于后端实际返回的数据格式
|
||
- 如果后端响应格式发生变化，需要相应更新前端代码
|
||
- 建议前后端团队统一 API 响应格式规范
|