forked from 77media/video-flow
谷歌登录接口成功后参数更改
This commit is contained in:
qikongjian
parent
bf6917f5e8
commit
e2703020ef
@ -5,9 +5,10 @@ import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { CheckCircle, XCircle, Loader2, AlertTriangle } from "lucide-react";
|
||||
import type { OAuthCallbackParams } from "@/app/types/google-oauth";
|
||||
|
||||
// 根据接口文档定义响应类型
|
||||
// 根据后端实际返回格式定义响应类型
|
||||
interface GoogleOAuthResponse {
|
||||
success: boolean;
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
token: string;
|
||||
user: {
|
||||
@ -21,7 +22,7 @@ interface GoogleOAuthResponse {
|
||||
};
|
||||
message: string;
|
||||
};
|
||||
message?: string;
|
||||
successful: boolean;
|
||||
}
|
||||
|
||||
export default function OAuthCallback() {
|
||||
@ -117,7 +118,13 @@ export default function OAuthCallback() {
|
||||
console.log('Python OAuth接口响应状态:', response.status);
|
||||
const result: GoogleOAuthResponse = await response.json();
|
||||
|
||||
if (!response.ok || !result.success) {
|
||||
console.log('🔍 后端返回的完整数据:', result);
|
||||
|
||||
// 根据后端实际返回格式判断成功状态
|
||||
// 后端返回: { code: 0, successful: true } 表示成功
|
||||
const isSuccess = response.ok && result.successful && result.code === 0;
|
||||
|
||||
if (!isSuccess) {
|
||||
console.error('Python OAuth接口处理失败:', result);
|
||||
|
||||
// 处理常见错误码
|
||||
@ -129,21 +136,25 @@ export default function OAuthCallback() {
|
||||
throw new Error('Authentication service error. Please try again later.');
|
||||
}
|
||||
|
||||
throw new Error(result.message || 'Google OAuth failed');
|
||||
// 根据后端返回格式处理错误
|
||||
const errorMessage = result.message || `OAuth failed (code: ${result.code})`;
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
console.log('Google OAuth成功:', {
|
||||
console.log('🎉 Google OAuth成功:', {
|
||||
userId: result.data?.user?.userId,
|
||||
email: result.data?.user?.email,
|
||||
isNewUser: result.data?.user?.isNewUser
|
||||
isNewUser: result.data?.user?.isNewUser,
|
||||
code: result.code,
|
||||
successful: result.successful
|
||||
});
|
||||
|
||||
// 处理成功结果
|
||||
console.log('Google登录成功:', result);
|
||||
console.log('✅ Google登录成功，完整响应:', result);
|
||||
setStatus("success");
|
||||
setMessage(result.data.message || "Login successful! Redirecting to dashboard...");
|
||||
|
||||
// 根据接口文档的响应格式保存用户信息
|
||||
// 根据后端实际响应格式保存用户信息
|
||||
const { token, user } = result.data;
|
||||
|
||||
// 保存用户信息到localStorage
|
||||
@ -157,14 +168,20 @@ export default function OAuthCallback() {
|
||||
isNewUser: user.isNewUser
|
||||
};
|
||||
|
||||
console.log('💾 保存用户数据到 localStorage:', userData);
|
||||
localStorage.setItem('currentUser', JSON.stringify(userData));
|
||||
|
||||
if (token) {
|
||||
console.log('🔑 保存 token 到 localStorage');
|
||||
localStorage.setItem('token', token);
|
||||
}
|
||||
|
||||
console.log('⏰ 准备在2秒后跳转到 /movies');
|
||||
|
||||
// 2秒后跳转到主页
|
||||
setTimeout(() => {
|
||||
const returnUrl = '/movies';
|
||||
console.log('🚀 开始跳转到:', returnUrl);
|
||||
window.location.href = returnUrl;
|
||||
}, 2000);
|
||||
|
||||
|
||||
153
docs/oauth-callback-fix-summary.md
Normal file
153
docs/oauth-callback-fix-summary.md
Normal file
@ -0,0 +1,153 @@
|
||||
# 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 响应格式规范
|
||||
Loading…
x
Reference in New Issue
Block a user