feat():learning后台管理前端页面初始化

src/components/AuthGuard.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Spin } from 'antd';
+import { useAuth } from '../hooks/useAuth';
+
+interface AuthGuardProps {
+  children: React.ReactNode;
+}
+
+const AuthGuard: React.FC<AuthGuardProps> = ({ children }) => {
+  const {
+    isAuthenticated,
+    initAuth,
+    loginUrl,
+    redirectToLogin,
+    loading,
+    logout,
+  } = useAuth();
+
+  const initedRef = useRef(false);
+  const [booting, setBooting] = useState(true);
+
+  // 调试信息
+  console.log('🔐 [AuthGuard] 状态:', {
+    booting,
+    isAuthenticated,
+    loading,
+    hasLoginUrl: !!loginUrl,
+  });
+
+  useEffect(() => {
+    if (initedRef.current) {
+      setBooting(false);
+      return;
+    }
+    initedRef.current = true;
+    (async () => {
+      try {
+        await initAuth();
+      } finally {
+        setBooting(false);
+      }
+    })();
+  }, [initAuth]);
+
+  // 未认证时，主动触发SSO登录流程
+  useEffect(() => {
+    if (!booting && !isAuthenticated && !loading) {
+      redirectToLogin();
+    }
+  }, [booting, isAuthenticated, loading, redirectToLogin]);
+
+  if (booting) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          height: '100vh',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Spin tip="Loading...">
+          <div className="w-[200px]" />
+        </Spin>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    // 未认证时显示加载，等待自动跳转SSO
+    return (
+      <div
+        style={{
+          display: 'flex',
+          height: '100vh',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Spin tip="Redirecting to SSO...">
+          <div className="w-[200px]" />
+        </Spin>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default AuthGuard;