From 3d19ef05b3d2e27dfd1542f1e81753efb4f31130 Mon Sep 17 00:00:00 2001
From: cdn0x12 <git@cdn0x12.dev>
Date: Sat, 22 Feb 2025 01:23:13 +0800
Subject: [PATCH] [chore/frontend] call /auth/logout during logout

---
 .../src/pages/admin/layout/AdminLayout.tsx    | 51 ++++++++++++++++---
 frontend/src/pages/admin/login.tsx            |  5 ++
 2 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/admin/layout/AdminLayout.tsx b/frontend/src/pages/admin/layout/AdminLayout.tsx
index e90684f..f7be861 100644
--- a/frontend/src/pages/admin/layout/AdminLayout.tsx
+++ b/frontend/src/pages/admin/layout/AdminLayout.tsx
@@ -61,17 +61,52 @@ const AdminLayout: FC<AdminLayoutProps> = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { theme, setTheme } = useTheme();
-  const { user, loading, error } = useUser();
+  const { user, loading, error, fetchUser } = useUser();
 
   useEffect(() => {
-    console.log('AdminLayout user:', user);
-    console.log('AdminLayout loading:', loading);
-    console.log('AdminLayout error:', error);
-  }, [user, loading, error]);
+    // 如果没有 token，重定向到登录页
+    if (!localStorage.getItem('token')) {
+      navigate('/admin/login');
+      return;
+    }
 
-  const handleLogout = () => {
-    localStorage.removeItem('token');
-    navigate('/admin/login');
+    // 如果没有用户信息且没有在加载中，尝试获取用户信息
+    if (!user && !loading && !error) {
+      fetchUser();
+    }
+
+    // 如果获取用户信息出错，可能是 token 过期，重定向到登录页
+    if (error) {
+      localStorage.removeItem('token');
+      navigate('/admin/login');
+    }
+  }, [user, loading, error, navigate, fetchUser]);
+
+  const handleLogout = async () => {
+    try {
+      // 调用后端登出接口
+      const token = localStorage.getItem('token');
+      if (token) {
+        await fetch('/api/v1/auth/logout', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+          },
+        });
+      }
+    } catch (err) {
+      console.error('Logout error:', err);
+    } finally {
+      // 清除所有认证相关的存储数据
+      localStorage.removeItem('token');
+      localStorage.removeItem('username');
+      
+      // 重置用户状态
+      await fetchUser();
+      
+      // 重定向到登录页
+      navigate('/admin/login');
+    }
   };
 
   return (
diff --git a/frontend/src/pages/admin/login.tsx b/frontend/src/pages/admin/login.tsx
index f0db1ab..ce57c00 100644
--- a/frontend/src/pages/admin/login.tsx
+++ b/frontend/src/pages/admin/login.tsx
@@ -4,6 +4,7 @@ import { FiUser, FiLock, FiSun, FiMoon, FiMonitor, FiGlobe } from 'react-icons/f
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../../hooks/useTheme';
 import { Menu } from '@headlessui/react';
+import { useUser } from '../../contexts/UserContext';
 
 interface LoginFormData {
   username: string;
@@ -27,6 +28,7 @@ export default function Login() {
   const navigate = useNavigate();
   const { t, i18n } = useTranslation();
   const { theme, setTheme } = useTheme();
+  const { fetchUser } = useUser();
   const [formData, setFormData] = useState<LoginFormData>({
     username: '',
     password: '',
@@ -66,6 +68,9 @@ export default function Login() {
         localStorage.removeItem('username');
       }
 
+      // 获取用户信息
+      await fetchUser();
+
       // 跳转到管理面板
       navigate('/admin');
     } catch (err) {