fix(frontend): prevent redirect to dashboard on page refresh

Fix hydration race condition where token check happened before
localStorage was read. Now waits for client-side initialization
before deciding whether to redirect to login.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
hailin 2026-01-13 00:25:59 -08:00
parent f84e8b4700
commit 1d7d38a82c
1 changed files with 25 additions and 8 deletions

View File

@ -1,6 +1,6 @@
'use client';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { getProfile } from '@/store/slices/auth.slice';
@ -15,17 +15,34 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
const dispatch = useAppDispatch();
const { token, isAuthenticated, user } = useAppSelector((state) => state.auth);
const { isCollapsed } = useSidebar();
const [isInitialized, setIsInitialized] = useState(false);
// 等待客户端 hydration 完成后再检查 token
useEffect(() => {
// 在客户端检查 localStorage 中是否有 token
const storedToken = localStorage.getItem('admin_token');
if (!storedToken) {
// 确实没有 token跳转到登录页
router.push('/login');
} else {
setIsInitialized(true);
}
}, [router]);
useEffect(() => {
if (!token) {
router.push('/login');
return;
}
if (!user) {
if (isInitialized && token && !user) {
dispatch(getProfile());
}
}, [token, user, dispatch, router]);
}, [isInitialized, token, user, dispatch]);
// 等待初始化完成
if (!isInitialized) {
return (
<div className="flex min-h-screen items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
</div>
);
}
if (!token) {
return null;