[chore/frontend] call /auth/logout during logout
This commit is contained in:
parent
2c3e238e9a
commit
3d19ef05b3
2 changed files with 48 additions and 8 deletions
|
@ -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 (
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue