fix(frontend): Fix auth hydration and auto-redirect to login

Fix issue where unauthenticated users were not automatically
redirected to the login page.

Root Cause:
- authStore.ts: isLoading was not set to false after hydration
- AuthGuard.tsx: Used isLoading instead of isHydrated for checks

Changes:
- Set isLoading = false in authStore onRehydrateStorage callback
- Changed AuthGuard to use isHydrated instead of isLoading
- Added console log for redirect debugging

This ensures:
- Hydration completes with correct loading state
- Unauthenticated users are immediately redirected to /login
- More explicit state management with isHydrated

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
2025-11-05 21:12:15 +01:00
parent 605e151f33
commit d9228057bb
2 changed files with 8 additions and 5 deletions

View File

@@ -7,16 +7,17 @@ import { useCurrentUser } from '@/lib/hooks/useAuth';
export function AuthGuard({ children }: { children: React.ReactNode }) {
const router = useRouter();
const { isAuthenticated, isLoading } = useAuthStore();
const { isAuthenticated, isHydrated } = useAuthStore();
const { isLoading: isUserLoading } = useCurrentUser();
useEffect(() => {
if (!isLoading && !isUserLoading && !isAuthenticated) {
if (isHydrated && !isUserLoading && !isAuthenticated) {
console.log('[AuthGuard] Redirecting to login - user not authenticated');
router.push('/login');
}
}, [isAuthenticated, isLoading, isUserLoading, router]);
}, [isAuthenticated, isHydrated, isUserLoading, router]);
if (isLoading || isUserLoading) {
if (!isHydrated || isUserLoading) {
return (
<div className="flex min-h-screen items-center justify-center">
<div className="text-center">

View File

@@ -57,9 +57,11 @@ export const useAuthStore = create<AuthState>()(
}
state.isHydrated = true;
state.isLoading = false; // 水合完成后停止 loading
console.log('[AuthStore] Hydration completed', {
userId: state.user?.id,
isAuthenticated: state.isAuthenticated
isAuthenticated: state.isAuthenticated,
isLoading: state.isLoading
});
}
},