From e2703020ef183849bcb201b7be22291c8bc94e57 Mon Sep 17 00:00:00 2001 From: qikongjian Date: Tue, 23 Sep 2025 19:45:34 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=B7=E6=AD=8C=E7=99=BB=E5=BD=95=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E6=88=90=E5=8A=9F=E5=90=8E=E5=8F=82=E6=95=B0=E6=9B=B4?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/users/oauth/callback/page.tsx | 35 +++++-- docs/oauth-callback-fix-summary.md | 153 +++++++++++++++++++++++++++++ 2 files changed, 179 insertions(+), 9 deletions(-) create mode 100644 docs/oauth-callback-fix-summary.md diff --git a/app/users/oauth/callback/page.tsx b/app/users/oauth/callback/page.tsx index 7b835cd..7989731 100644 --- a/app/users/oauth/callback/page.tsx +++ b/app/users/oauth/callback/page.tsx @@ -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); diff --git a/docs/oauth-callback-fix-summary.md b/docs/oauth-callback-fix-summary.md new file mode 100644 index 0000000..e1b734d --- /dev/null +++ b/docs/oauth-callback-fix-summary.md @@ -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 响应格式规范