[chore/frontend] call /auth/logout during logout

This commit is contained in:
CDN 2025-02-22 01:23:13 +08:00
parent 2c3e238e9a
commit 3d19ef05b3
Signed by: CDN
GPG key ID: 0C656827F9F80080
2 changed files with 48 additions and 8 deletions

View file

@ -61,17 +61,52 @@ const AdminLayout: FC<AdminLayoutProps> = () => {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const { user, loading, error } = useUser(); const { user, loading, error, fetchUser } = useUser();
useEffect(() => { useEffect(() => {
console.log('AdminLayout user:', user); // 如果没有 token重定向到登录页
console.log('AdminLayout loading:', loading); if (!localStorage.getItem('token')) {
console.log('AdminLayout error:', error); navigate('/admin/login');
}, [user, loading, error]); return;
}
const handleLogout = () => { // 如果没有用户信息且没有在加载中,尝试获取用户信息
localStorage.removeItem('token'); if (!user && !loading && !error) {
navigate('/admin/login'); 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 ( return (

View file

@ -4,6 +4,7 @@ import { FiUser, FiLock, FiSun, FiMoon, FiMonitor, FiGlobe } from 'react-icons/f
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useTheme } from '../../hooks/useTheme'; import { useTheme } from '../../hooks/useTheme';
import { Menu } from '@headlessui/react'; import { Menu } from '@headlessui/react';
import { useUser } from '../../contexts/UserContext';
interface LoginFormData { interface LoginFormData {
username: string; username: string;
@ -27,6 +28,7 @@ export default function Login() {
const navigate = useNavigate(); const navigate = useNavigate();
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const { fetchUser } = useUser();
const [formData, setFormData] = useState<LoginFormData>({ const [formData, setFormData] = useState<LoginFormData>({
username: '', username: '',
password: '', password: '',
@ -66,6 +68,9 @@ export default function Login() {
localStorage.removeItem('username'); localStorage.removeItem('username');
} }
// 获取用户信息
await fetchUser();
// 跳转到管理面板 // 跳转到管理面板
navigate('/admin'); navigate('/admin');
} catch (err) { } catch (err) {