diff --git a/src/api/request.ts b/src/api/request.ts index 0a52e0b..4d7e2f7 100644 --- a/src/api/request.ts +++ b/src/api/request.ts @@ -55,7 +55,16 @@ request.interceptors.response.use( break; case 401: console.error('未授权,请重新登录', data); - // 可以在这里处理登录跳转 + // 清除本地存储的 token 和用户信息 + if (typeof window !== 'undefined') { + localStorage.removeItem('accessToken'); + localStorage.removeItem('refreshToken'); + localStorage.removeItem('operatorId'); + localStorage.removeItem('operatorName'); + localStorage.removeItem('operatorUsername'); + // 跳转到首页并添加登录参数 + window.location.href = '/home?login=true'; + } break; case 403: console.error('拒绝访问', data); diff --git a/src/components/home/HomeSection.tsx b/src/components/home/HomeSection.tsx index d1458c0..2d5fb6d 100644 --- a/src/components/home/HomeSection.tsx +++ b/src/components/home/HomeSection.tsx @@ -89,6 +89,10 @@ export const HomeSection = () => { }, [currencyFormatter]); useEffect(() => { + const token = localStorage.getItem('accessToken'); + if (!token) { + return; + } getUserOwnedMenus({ app_id: APP_ID }) .then((res) => { console.log('获取用户菜单权限返回内容:', res); @@ -275,6 +279,8 @@ export const HomeSection = () => { localStorage.setItem('operatorId', payload.userId); localStorage.setItem('operatorName', payload.userName || payload.username); localStorage.setItem('operatorUsername', payload.username); + // 触发自定义事件,通知 MainLayout 更新状态 + window.dispatchEvent(new Event('localStorageChange')); setShowLoginModal(false); }} /> diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx index c421867..05e783a 100644 --- a/src/layouts/MainLayout.tsx +++ b/src/layouts/MainLayout.tsx @@ -64,6 +64,8 @@ export const MainLayout = () => { localStorage.setItem('operatorUsername', info.username || ''); localStorage.setItem('accessToken', info.accessToken || ''); localStorage.setItem('refreshToken', info.refreshToken || ''); + // 触发自定义事件,通知其他组件更新状态 + window.dispatchEvent(new Event('localStorageChange')); }; // 初始化时检查是否有已登录的操作员 @@ -74,6 +76,52 @@ export const MainLayout = () => { } }, []); + // 监听 localStorage 变化,更新操作员名称 + useEffect(() => { + const handleStorageChange = (e: StorageEvent) => { + if (e.key === 'operatorName') { + setOperatorName(e.newValue || ''); + } + }; + + // 监听 storage 事件(跨标签页) + window.addEventListener('storage', handleStorageChange); + + // 监听自定义事件(同标签页内) + const handleCustomStorageChange = () => { + const savedName = localStorage.getItem('operatorName'); + if (savedName) { + setOperatorName(savedName); + } + }; + window.addEventListener('localStorageChange', handleCustomStorageChange); + + return () => { + window.removeEventListener('storage', handleStorageChange); + window.removeEventListener('localStorageChange', handleCustomStorageChange); + }; + }, []); + + // 当登录弹窗关闭时,重新读取操作员名称 + useEffect(() => { + if (!loginModalOpen) { + const savedName = localStorage.getItem('operatorName'); + if (savedName) { + setOperatorName(savedName); + } + } + }, [loginModalOpen]); + + // 检查 URL 参数,如果包含 login=true,则打开登录弹窗 + useEffect(() => { + const searchParams = new URLSearchParams(location.search); + if (searchParams.get('login') === 'true') { + setLoginModalOpen(true); + // 清除 URL 参数,避免刷新后再次打开 + navigate(location.pathname, { replace: true }); + } + }, [location.search, location.pathname, navigate]); + return (