feat: 用户信息和系统设置增加跨页面通信能力

Author: fxss5201

src/TabCommunicationOnMessage.ts

@@ -0,0 +1,32 @@
+import store from './store/index'
+import i18n from './locales/index'
+import TabCommunication from '@/utils/TabCommunication'
+import { onlyChangeTheme } from './store/themeSlice'
+import { onlyChangeSystemSet } from './store/systemSetSlice'
+import { type ThemeType, themeList, type LocaleType, localeList } from './config'
+import { changeHtmlLang } from '@/utils/changeHtmlLang'
+import { onlyLoginFn, onlyLogoutFn } from './store/index'
+
+TabCommunication.onMessage((data) => {
+  if (data.type === 'theme_channel') {
+    if (themeList.includes(data.data)) {
+      store.dispatch(onlyChangeTheme(data.data as ThemeType))
+    }
+  } else if (data.type === 'locales_channel') {
+    if (localeList.includes(data.data)) {
+      i18n.changeLanguage(data.data as LocaleType)
+      changeHtmlLang(data.data as LocaleType)
+    }
+  } else if (data.type === 'system_set_channel') {
+    store.dispatch(onlyChangeSystemSet(data.data))
+  } else if (data.type === 'user_channel') {
+    if (data.data.id) {
+      onlyLoginFn(data.data)
+    } else {
+      onlyLogoutFn()
+    }
+  }
+})
+window.addEventListener('unload', () => {
+  TabCommunication.close()
+})

src/layout/LayoutUser.tsx

@@ -3,13 +3,13 @@ import cn from 'classnames'
 import { LogoutOutlined, UserOutlined } from '@ant-design/icons'
 import { useUser } from '@/storeHooks/useUser'
 import { useNavigate } from 'react-router'
-import config from '@/config'
 import { useTheme } from '@/storeHooks/useTheme'
 import { useTranslation } from 'react-i18next'
 import { useAClassStyles, usePopoverItemStyles } from '@/Hooks/useStyles'
+import { logoutFn } from '@/store/index'
 
 function LayoutUser({ className }: { className?: string }) {
-  const { name, img, badge, changeUserInfo } = useUser()
+  const { name, img, badge } = useUser()
   const { theme } = useTheme()
   const navigate = useNavigate()
   const { t } = useTranslation()
@@ -24,12 +24,6 @@ function LayoutUser({ className }: { className?: string }) {
     }
   }
 
-  const logoutFn = () => {
-    localStorage.removeItem(config.loginLocalStorageKey)
-    changeUserInfo({ id: '', name: '', img: undefined, badge: 0, permissionList: [] })
-    navigate('/login')
-  }
-
   return (
     <Popover content={
       [

src/main.tsx

@@ -1,36 +1,16 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import i18n from './locales/index'
+import './locales/index'
 import { RouterProvider } from 'react-router/dom'
 import router from './router'
 import store from './store/index'
 import { Provider } from 'react-redux'
 import { setupProdMockServer } from './mockProdServer'
-import TabCommunication from '@/utils/TabCommunication'
-import { onlyChangeTheme } from './store/themeSlice'
-import { type ThemeType, themeList, type LocaleType, localeList } from './config'
-import { changeHtmlLang } from '@/utils/changeHtmlLang'
+import './TabCommunicationOnMessage'
 
 if (import.meta.env.PROD) setupProdMockServer()
 
-TabCommunication.onMessage((data) => {
-  console.log('TabCommunication', data)
-  if (data.type === 'theme_channel') {
-    if (themeList.includes(data.data)) {
-      store.dispatch(onlyChangeTheme(data.data as ThemeType))
-    }
-  } else if (data.type === 'locales_channel') {
-    if (localeList.includes(data.data)) {
-      i18n.changeLanguage(data.data as LocaleType)
-      changeHtmlLang(data.data as LocaleType)
-    }
-  }
-})
-window.addEventListener('unload', () => {
-  TabCommunication.close()
-})
-
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Provider store={store}>

src/pages/Login.tsx

@@ -5,10 +5,10 @@ import { useNavigate } from 'react-router'
 import LayoutTheme from '@/layout/LayoutTheme'
 import LayoutLocale from '@/layout/LayoutLocale'
 import config from '@/config'
-import { useUser } from '@/storeHooks/useUser'
 import { useTranslation } from 'react-i18next'
 import FormPassword from '@/components/FormPassword'
 import FormCaptcha from '@/components/FormCaptcha'
+import { loginFn } from '@/store/index'
 
 type LoginType = 'phone' | 'account'
 interface LoginFormValues {
@@ -33,7 +33,6 @@ function Login() {
   const { message } = App.useApp()
   const { token } = antdTheme.useToken()
   const [ loginType, setLoginType ] = useState<LoginType>('account')
-  const { changeUserInfo } = useUser()
   const [ form ] = Form.useForm()
   const rememberLogin = localStorage.getItem('rememberLogin')
   const formValues: LoginFormValues = {
@@ -80,11 +79,9 @@ function Login() {
             badge: 10,
             permissionList: values.username === 'admin' ? ['01', '02', '03', '09'] : ['01', '02'],
           }
-          changeUserInfo(userInfo)
-          localStorage.setItem(config.loginLocalStorageKey, JSON.stringify(userInfo))
           await waitTime(2000)
           message.success(t('login.Login success', { defaultValue: '登录成功' }))
-          navigate('/')
+          loginFn(userInfo)
         }}
         size='large'
         style={{

src/store/index.ts

@@ -1,10 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit'
+import config from '@/config'
+import router from '@/router'
 import themeReducer from './themeSlice'
 import routeLoadingReducer from './routeLoadingSlice'
 import layoutStateReducer from './layoutStateSlice'
 import activitysReducer from './activitysSlice'
 import layoutTabsReducer from './layoutTabsSlice'
-import userReducer from './userSlice'
+import userReducer, { changeUserInfo, onlyChangeUserInfo, type UserState } from './userSlice'
 import watermarkReducer from './watermarkSlice'
 import systemSetReducer from './systemSetSlice'
 
@@ -25,3 +27,31 @@ export default store
 
 export type RootState = ReturnType<typeof store.getState>
 export type AppDispatch = typeof store.dispatch
+
+const BASE_URL = import.meta.env.BASE_URL
+export const loginFn = (userInfo: UserState['value']) => {
+  localStorage.setItem(config.loginLocalStorageKey, JSON.stringify(userInfo))
+  store.dispatch(changeUserInfo(userInfo))
+  router.navigate('/')
+}
+export const onlyLoginFn = (userInfo: UserState['value']) => {
+  store.dispatch(onlyChangeUserInfo(userInfo))
+  const pathname = window.location.pathname
+  if (pathname === BASE_URL + 'login') {
+    router.navigate('/')
+  }
+}
+export const logoutFn = () => {
+  localStorage.removeItem(config.loginLocalStorageKey)
+  store.dispatch(changeUserInfo({ id: '', name: '', img: undefined, badge: 0, permissionList: [] }))
+  router.navigate('/login')
+}
+export const onlyLogoutFn = () => {
+  store.dispatch(onlyChangeUserInfo({ id: '', name: '', img: undefined, badge: 0, permissionList: [] }))
+  const pathname = window.location.pathname
+  const whiteList = config.whiteList.map(x => BASE_URL + x.replace(/^\//, ''))
+  if (!whiteList.includes(pathname)) {
+    router.navigate('/login')
+  }
+}
+

src/store/systemSetSlice.ts

@@ -1,5 +1,6 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
 import config from '@/config'
+import TabCommunication from '@/utils/TabCommunication'
 
 export interface SystemSetState {
   colorPrimary: string | undefined
@@ -21,10 +22,17 @@ export const systemSetSlice = createSlice({
     changeSystemSet: (state, action: PayloadAction<SystemSetState>) => {
       state.value = action.payload
       localStorage.setItem(config.systemSet?.localStorageKey || 'react-components-system-set', JSON.stringify(state.value))
+      TabCommunication.postMessage({
+        type: 'system_set_channel',
+        data: state.value
+      })
+    },
+    onlyChangeSystemSet: (state, action: PayloadAction<SystemSetState>) => {
+      state.value = action.payload
     }
   }
 })
 
-export const { changeSystemSet } = systemSetSlice.actions
+export const { changeSystemSet, onlyChangeSystemSet } = systemSetSlice.actions
 
 export default systemSetSlice.reducer

src/store/userSlice.ts

@@ -1,5 +1,6 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
 import config from '@/config'
+import TabCommunication from '@/utils/TabCommunication'
 
 export type UserState = {
   value: {
@@ -33,6 +34,13 @@ export const userSlice = createSlice({
     changeUserInfo: (state, action: PayloadAction<UserState['value']>) => {
       state.value = action.payload
       localStorage.setItem(config.loginLocalStorageKey, JSON.stringify(state.value))
+      TabCommunication.postMessage({
+        type: 'user_channel',
+        data: state.value
+      })
+    },
+    onlyChangeUserInfo: (state, action: PayloadAction<UserState['value']>) => {
+      state.value = action.payload
     },
     changeBadge: (state, action: PayloadAction<number>) => {
       state.value.badge = action.payload
@@ -45,6 +53,6 @@ export const userSlice = createSlice({
   }
 })
 
-export const { changeUserInfo, changeBadge, changePermissionList } = userSlice.actions
+export const { changeUserInfo, onlyChangeUserInfo, changeBadge, changePermissionList } = userSlice.actions
 
 export default userSlice.reducer

src/utils/TabCommunication.ts

@@ -1,10 +1,13 @@
 import pkg from '../../package.json'
 
+export type TabMessageType = 'theme_channel' | 'locales_channel' | 'system_set_channel' | 'user_channel'
+export type TabMessageData = {
+  type: TabMessageType
+  data: any
+}
+
 export interface TabMessageCallback {
-  (data: {
-    type: 'theme_channel' | 'locales_channel'
-    data: any
-  }): void;
+  (data: TabMessageData): void;
 }
 
 export class TabCommunication {
@@ -85,10 +88,7 @@ export class TabCommunication {
    * 发送消息
    * @param data - 要发送的消息（支持任意可序列化类型：对象、数组、字符串等）
    */
-  postMessage(data: {
-    type: string
-    data: any
-  }): void {
+  postMessage(data: TabMessageData): void {
     if (this.isSupported && this.bc) {
       // 方案1：BroadcastChannel 直接发送
       this.bc.postMessage({