diff --git a/src/api/index.ts b/src/api/index.ts index f050a7f..f84b964 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -40,8 +40,8 @@ axios.interceptors.response.use( duration: 5 * 1000 }); if ([-401].includes(res.code)) { - const { logout } = useUser(); - logout(); + const { logoutHooks } = useUser(); + logoutHooks(); } return Promise.reject(new Error(res.msg || 'Error')); } diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx index 5a8b8a2..55984b4 100644 --- a/src/components/NavBar/index.tsx +++ b/src/components/NavBar/index.tsx @@ -3,18 +3,11 @@ import { Avatar, Dropdown, Menu, - Divider, - Message, Button } from '@arco-design/web-react'; import { - IconUser, IconSettings, IconPoweroff, - IconExperiment, - IconDashboard, - IconInteraction, - IconTag, IconLoading } from '@arco-design/web-react/icon'; import { useSelector, useDispatch } from 'react-redux'; @@ -26,9 +19,11 @@ import styles from './style/index.module.less'; import useStorage from '@/utils/useStorage'; import { generatePermission } from '@/routes'; import logoImage from '@/public/assets/logo.png'; +import useUser from '@/hooks/user'; function Navbar({ show }: { show: boolean }) { const t = useLocale(); + const { logoutHooks } = useUser(); const { userInfo, userLoading } = useSelector((state: GlobalState) => state); const dispatch = useDispatch(); @@ -37,18 +32,13 @@ function Navbar({ show }: { show: boolean }) { const { setLang, lang, theme, setTheme } = useContext(GlobalContext); - function logout() { + function handleLogout() { setUserStatus('logout'); - window.location.href = '/login'; + logoutHooks() } function onMenuItemClick(key) { - if (key === 'logout') { - logout(); - } - else { - Message.info(`You clicked ${key}`); - } + handleLogout(); } useEffect(() => { @@ -82,48 +72,6 @@ function Navbar({ show }: { show: boolean }) { const droplist = ( - - - - {role === 'admin' - ? t['menu.user.role.admin'] - : t['menu.user.role.user']} - - - } - > - - - {t['menu.user.switchRoles']} - - - - - {t['menu.user.setting']} - - - - {t['message.seeMore']} - - } - > - - - {t['menu.dashboard.workplace']} - - - - {t['menu.list.cardList']} - - - - {t['navbar.logout']} @@ -146,7 +94,7 @@ function Navbar({ show }: { show: boolean }) {
    {userInfo && (
  • - + {userLoading ? ( diff --git a/src/hooks/user.ts b/src/hooks/user.ts index 97f42f8..28f8f93 100644 --- a/src/hooks/user.ts +++ b/src/hooks/user.ts @@ -1,33 +1,26 @@ import { Message } from '@arco-design/web-react'; import { useDispatch } from 'react-redux'; -import axios from 'axios'; +import { logout } from '@/api/user'; +import { clearToken } from '@/utils/auth'; interface UseUserReturnType { - logout: () => Promise; + logoutHooks: () => Promise; } export default function useUser(): UseUserReturnType { const dispatch = useDispatch(); - const logout = async () => { + const logoutHooks = async () => { try { // 调用后端登出接口 - await axios.post('/api/user/logout'); + await logout(); } catch (error) { // 即使后端登出失败,也要清除本地状态 console.error('Logout error:', error); } finally { - // 清除用户信息状态 - dispatch({ - type: 'update-userInfo', - payload: { - userInfo: { permissions: {} }, - userLoading: false - } - }); - // 清除本地存储的用户状态 localStorage.removeItem('userStatus'); + clearToken() // 显示成功消息 Message.success('退出成功'); @@ -39,6 +32,6 @@ export default function useUser(): UseUserReturnType { }; return { - logout + logoutHooks }; } \ No newline at end of file