forked from 77media/video-flow
75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { useRouter, usePathname } from 'next/navigation';
|
||
import { checkAuth, isAuthenticated } from '@/lib/auth';
|
||
import GlobalLoad from '../common/GlobalLoad';
|
||
|
||
interface AuthGuardProps {
|
||
children: React.ReactNode;
|
||
}
|
||
|
||
export default function AuthGuard({ children }: AuthGuardProps) {
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [isAuthorized, setIsAuthorized] = useState(false);
|
||
const router = useRouter();
|
||
const pathname = usePathname();
|
||
|
||
// 不需要鉴权的页面
|
||
const publicPaths = ['/login', '/signup', '/forgot-password'];
|
||
const isPublicPath = publicPaths.includes(pathname);
|
||
|
||
useEffect(() => {
|
||
const verifyAuth = async () => {
|
||
// 如果是公共页面，不需要鉴权
|
||
if (isPublicPath) {
|
||
setIsAuthorized(true);
|
||
setIsLoading(false);
|
||
return;
|
||
}
|
||
|
||
// 检查是否有token
|
||
if (!isAuthenticated()) {
|
||
router.push('/login');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 调用鉴权接口验证token
|
||
const isValid = await checkAuth();
|
||
|
||
if (isValid) {
|
||
setIsAuthorized(true);
|
||
} else {
|
||
// Token无效，重定向到登录页
|
||
router.push('/login');
|
||
}
|
||
} catch (error) {
|
||
console.error('Auth verification failed:', error);
|
||
router.push('/login');
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
verifyAuth();
|
||
}, [pathname, router, isPublicPath]);
|
||
|
||
// 显示加载状态
|
||
if (isLoading) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-screen">
|
||
<GlobalLoad show={true} progress={0} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 如果未授权，返回null（会由router处理跳转）
|
||
if (!isAuthorized) {
|
||
return null;
|
||
}
|
||
|
||
// 授权通过，渲染子组件
|
||
return <>{children}</>;
|
||
}
|