fix: enhance authentication flow and improve error handling in middleware and components

cubxxw · cubxxw · commit b19bebc8409a · 2025-05-16T13:04:25.000+08:00
- Added detailed logging in the middleware to track access token validation and redirect logic.
- Improved error handling in the Google login callback by utilizing the auth hook for token management.
- Removed the deprecated set-token API route to streamline authentication processes.
- Enhanced cookie management and debugging information in the customers page for better user experience during authentication checks.
diff --git a/backend/app/core/config.py b/backend/app/core/config.py
@@ -211,6 +211,7 @@ def _check_default_secret(self, var_name: str, value: str | None) -> None:
         """Check if the provided secret value is "nexus" and raise a warning or error."""
         if value == "nexus":
             message = (
+                
                 f'The value of {var_name} is "nexus", '
                 "for security, please change it, at least for deployments."
             )
diff --git a/frontend/app/api/auth/set-token/route.ts b/frontend/app/api/auth/set-token/route.ts
diff --git a/frontend/app/customers/page.tsx b/frontend/app/customers/page.tsx
@@ -23,29 +23,66 @@ export default function CustomersPage() {
     const checkAuth = async () => {
       try {
         const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000";
+        
+        // 更详细地检查cookie
+        console.log("[Customer] 检查cookie信息");
+        console.log("[Customer] 全部cookie:", document.cookie);
+        
         const token = document.cookie
           .split('; ')
           .find(row => row.startsWith('accessToken='))
           ?.split('=')[1];
         
+        console.log("[Customer] accessToken:", token ? `${token.substring(0, 10)}...` : "Missing");
+        
         if (token) {
+          console.log("[Customer] 尝试获取用户信息");
           const response = await fetch(`${apiUrl}/api/v1/users/me`, {
             headers: {
               Authorization: `Bearer ${token}`,
             },
+            credentials: 'include', // 包含cookies
           });
           
+          const status = response.status;
+          console.log("[Customer] API响应状态:", status);
+          
+          if (!response.ok) {
+            const errorText = await response.text();
+            console.error("[Customer] API错误:", errorText);
+            setDebugInfo({
+              status,
+              error: errorText,
+              token: token ? '部分显示: ' + token.substring(0, 10) + '...' : 'Missing',
+              fullCookies: document.cookie,
+            });
+            return;
+          }
+          
           const data = await response.json();
+          console.log("[Customer] 获取到的用户数据:", data);
+          
           setDebugInfo({
-            status: response.status,
-            data: data,
-            token: token ? 'Present' : 'Missing',
+            status,
+            data,
+            token: token ? '部分显示: ' + token.substring(0, 10) + '...' : 'Missing',
+            fullCookies: document.cookie,
           });
         } else {
-          setDebugInfo({ token: 'Missing' });
+          console.log("[Customer] 未找到token");
+          setDebugInfo({ 
+            token: 'Missing', 
+            fullCookies: document.cookie,
+            timestamp: new Date().toISOString(),
+          });
         }
       } catch (e) {
-        setDebugInfo({ error: e instanceof Error ? e.message : String(e) });
+        console.error("[Customer] 检查认证时出错:", e);
+        setDebugInfo({ 
+          error: e instanceof Error ? e.message : String(e),
+          fullCookies: document.cookie,
+          timestamp: new Date().toISOString(),
+        });
       }
     };
     
diff --git a/frontend/app/login/google/callback/page.tsx b/frontend/app/login/google/callback/page.tsx
@@ -2,11 +2,13 @@
 
 import { useEffect, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import { useAuth } from "@/lib/auth";
 
 // 创建一个内部组件处理参数
 function CallbackContent() {
   const searchParams = useSearchParams();
   const router = useRouter();
+  const { login } = useAuth();
 
   useEffect(() => {
     // 从URL获取token参数
@@ -28,32 +30,21 @@ function CallbackContent() {
       return;
     }
 
-    // 客户端处理token和Cookie
-    const handleToken = async () => {
-      try {
-        // 使用fetch API设置cookie
-        const response = await fetch('/api/auth/set-token', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ token }),
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to set authentication token');
-        }
-
-        // 成功后导航到dashboard
+    // 使用auth hook的login方法设置cookie
+    try {
+      console.log("Setting token from Google login");
+      login(token);
+      
+      // 添加延迟以确保token被设置和处理
+      setTimeout(() => {
+        console.log("Navigating to dashboard after Google login");
         router.push('/dashboard');
-      } catch (error) {
-        console.error("Error setting token:", error);
-        router.push("/login?error=token_processing_error");
-      }
-    };
-
-    handleToken();
-  }, [searchParams, router]);
+      }, 500);
+    } catch (error) {
+      console.error("Error processing Google login token:", error);
+      router.push("/login?error=token_processing_error");
+    }
+  }, [searchParams, router, login]);
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center">
diff --git a/frontend/lib/auth.ts b/frontend/lib/auth.ts
@@ -35,8 +35,11 @@ export function useAuth(): AuthContextType {
       setError(null);
       
       const token = getCookie("accessToken");
+      
+      console.log("[Auth] 尝试获取accessToken:", token ? "存在" : "不存在");
+      
       if (!token) {
-        console.log("No access token found");
+        console.log("[Auth] No access token found");
         setIsLoading(false);
         return;
       }
@@ -49,32 +52,33 @@ export function useAuth(): AuthContextType {
           return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
         }).join(''));
         
-        console.log("JWT Payload:", JSON.parse(jsonPayload));
+        console.log("[Auth] JWT Payload:", JSON.parse(jsonPayload));
       } catch (e) {
-        console.error("Failed to decode JWT:", e);
+        console.error("[Auth] Failed to decode JWT:", e);
       }
       
       // In a real implementation, you would fetch from your API
       const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000";
-      console.log(`Fetching user data from ${apiUrl}/api/v1/users/me`);
+      console.log(`[Auth] Fetching user data from ${apiUrl}/api/v1/users/me`);
       
       const response = await fetch(`${apiUrl}/api/v1/users/me`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
+        credentials: 'include', // 包含cookies
       });
 
       if (!response.ok) {
         const errorText = await response.text();
-        console.error("API Error:", response.status, errorText);
+        console.error("[Auth] API Error:", response.status, errorText);
         throw new Error(`Failed to fetch user data: ${response.status} ${errorText}`);
       }
 
       const userData = await response.json();
-      console.log("User data fetched successfully:", userData);
+      console.log("[Auth] User data fetched successfully:", userData);
       setUser(userData);
     } catch (err) {
-      console.error("Error in fetchUser:", err);
+      console.error("[Auth] Error in fetchUser:", err);
       setError(
         err instanceof Error ? err : new Error("An unknown error occurred"),
       );
@@ -98,6 +102,7 @@ export function useAuth(): AuthContextType {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(userData),
+        credentials: 'include', // 包含cookies
       });
 
       if (!response.ok) {
@@ -108,7 +113,7 @@ export function useAuth(): AuthContextType {
       const updatedUser = await response.json();
       setUser(updatedUser);
     } catch (err) {
-      console.error("Error in updateUser:", err);
+      console.error("[Auth] Error in updateUser:", err);
       setError(
         err instanceof Error ? err : new Error("An unknown error occurred"),
       );
@@ -117,31 +122,51 @@ export function useAuth(): AuthContextType {
   };
 
   const login = (token: string) => {
-    // Store the token in a cookie
-    document.cookie = `accessToken=${token};path=/;max-age=${60 * 60 * 24 * 7}`; // 7 days
-    console.log("Access token stored in cookie");
-    // Fetch user data after login
-    fetchUser();
+    try {
+      console.log("[Auth] Setting access token in cookie");
+      
+      // 确保token有效
+      if (!token || token.trim() === '') {
+        console.error("[Auth] Invalid token provided");
+        return;
+      }
+      
+      // 设置cookie，添加更多安全选项
+      const cookieValue = `accessToken=${token};path=/;max-age=${60 * 60 * 24 * 7}`;
+      document.cookie = cookieValue;
+      
+      // 验证cookie是否设置成功
+      const savedToken = getCookie("accessToken");
+      console.log("[Auth] Token saved in cookie:", savedToken ? "成功" : "失败");
+      
+      // 打印所有的cookie以便调试
+      console.log("[Auth] Current cookies:", document.cookie);
+      
+      // Fetch user data after login
+      fetchUser();
+    } catch (error) {
+      console.error("[Auth] Error setting token in cookie:", error);
+    }
   };
 
   const logout = () => {
     // Clear the token
     document.cookie = "accessToken=;path=/;max-age=0";
-    console.log("Access token cleared");
+    console.log("[Auth] Access token cleared");
     // Reset user
     setUser(null);
     // Redirect to login page
     router.push("/login");
   };
 
   useEffect(() => {
-    console.log("Auth hook mounted, checking for token");
+    console.log("[Auth] Auth hook mounted, checking for token");
     const token = getCookie("accessToken");
     if (token) {
-      console.log("Token found, fetching user");
+      console.log("[Auth] Token found, fetching user");
       fetchUser();
     } else {
-      console.log("No token found");
+      console.log("[Auth] No token found");
       setIsLoading(false);
     }
   }, []);
@@ -158,12 +183,24 @@ export function useAuth(): AuthContextType {
 
 // Helper to get cookie value on client side
 function getCookie(name: string): string | undefined {
-  if (typeof document === "undefined") return undefined;
+  if (typeof document === "undefined") {
+    console.log("[Auth] getCookie: document is undefined (server side)");
+    return undefined;
+  }
 
-  const value = `; ${document.cookie}`;
-  const parts = value.split(`; ${name}=`);
-  if (parts.length === 2) {
-    return parts.pop()?.split(";").shift();
+  console.log("[Auth] getCookie: 搜索cookie:", name);
+  console.log("[Auth] getCookie: 所有cookie:", document.cookie);
+  
+  const cookies = document.cookie.split(';');
+  for (let i = 0; i < cookies.length; i++) {
+    const cookie = cookies[i].trim();
+    if (cookie.startsWith(name + '=')) {
+      const value = cookie.substring(name.length + 1);
+      console.log(`[Auth] getCookie: 找到 ${name} = ${value.substring(0, 10)}...`);
+      return value;
+    }
   }
+  
+  console.log(`[Auth] getCookie: ${name} 未找到`);
   return undefined;
 }
diff --git a/frontend/middleware.ts b/frontend/middleware.ts
@@ -3,24 +3,43 @@ import type { NextRequest } from "next/server";
 import { readUserMe } from "@/app/clientService";
 
 export async function middleware(request: NextRequest) {
+  console.log("[Middleware] 处理路径:", request.nextUrl.pathname);
+  
+  // 检查cookies
   const token = request.cookies.get("accessToken");
-
+  console.log("[Middleware] accessToken:", token ? "存在" : "不存在");
+  
   if (!token) {
-    return NextResponse.redirect(new URL("/login", request.url));
+    console.log("[Middleware] 没有token，重定向到登录页面");
+    // 保存原始URL以便登录后重定向回来
+    const redirectUrl = new URL("/login", request.url);
+    redirectUrl.searchParams.set("callbackUrl", request.nextUrl.pathname);
+    return NextResponse.redirect(redirectUrl);
   }
 
-  const options = {
-    headers: {
-      Authorization: `Bearer ${token.value}`,
-    },
-  };
-
-  const { error } = await readUserMe(options);
-
-  if (error) {
+  try {
+    const options = {
+      headers: {
+        Authorization: `Bearer ${token.value}`,
+      },
+    };
+    
+    console.log("[Middleware] 验证token有效性");
+    const { data, error } = await readUserMe(options);
+    
+    if (error) {
+      console.log("[Middleware] 验证失败:", error);
+      return NextResponse.redirect(new URL("/login", request.url));
+    }
+    
+    console.log("[Middleware] 验证成功, 用户:", data?.email);
+    const response = NextResponse.next();
+    return response;
+    
+  } catch (e) {
+    console.error("[Middleware] 处理请求时出错:", e);
     return NextResponse.redirect(new URL("/login", request.url));
   }
-  return NextResponse.next();
 }
 
 export const config = {

Original file line number	Diff line number	Diff line change
`@@ -211,6 +211,7 @@ def _check_default_secret(self, var_name: str, value: str \| None) -> None:`
`211`	`211`	`"""Check if the provided secret value is "nexus" and raise a warning or error."""`
`212`	`212`	`if value == "nexus":`
`213`	`213`	`message = (`
	`214`	`+`
`214`	`215`	`f'The value of {var_name} is "nexus", '`
`215`	`216`	`"for security, please change it, at least for deployments."`
`216`	`217`	`)`