优化部分代码

admin-views/src/hooks/userSettings.ts → admin-views/src/hooks/useSetting.ts

@@ -2,7 +2,7 @@ import {useSelector} from 'react-redux'
 import {GlobalState} from '@/store'
 import {arrayGet} from '@/utils/common'
 
-const useSettings = () => {
+const useSetting = () => {
     const settings:any = useSelector((state: GlobalState) => state.appSettings)
 
     const getSetting = (key = '', def = '') => {
@@ -16,4 +16,4 @@ const useSettings = () => {
     }
 }
 
-export default useSettings
+export default useSetting

admin-views/src/hooks/useSetup.ts

@@ -1,7 +1,6 @@
 import {useMount, useRequest} from 'ahooks'
-import {fetchSettings, fetchUserInfo} from '@/service/api'
-import {appLoaded} from '@/utils/common'
-import {checkLogin} from '@/utils/checkLogin'
+import {fetchLogout, fetchSettings, fetchUserInfo} from '@/service/api'
+import {appLoaded, inLoginPage, registerGlobalFunction, Token} from '@/utils/common'
 import useStorage from '@/utils/useStorage'
 import zhCN from 'antd/locale/zh_CN'
 import enUS from 'antd/locale/en_US'
@@ -65,6 +64,7 @@ const useSetup = (store) => {
         }
     })
 
+    // 初始化用户信息
     const initUserInfo = useRequest(fetchUserInfo, {
         manual: true,
         onSuccess(res) {
@@ -75,6 +75,15 @@ const useSetup = (store) => {
         }
     })
 
+    // 退出登录
+    const logout = useRequest(fetchLogout, {
+        manual: true,
+        onFinally() {
+            Token().clear()
+            window.location.hash = '#/login'
+        }
+    })
+
     // 获取语言
     const getAntdLocale = () => {
         switch (lang) {
@@ -87,17 +96,26 @@ const useSetup = (store) => {
         }
     }
 
+    // 注册全局函数
+    const registerFunctions = () => {
+        registerGlobalFunction('logout', () => logout.run())
+    }
+
+    // 初始化
     const init = async () => {
         await initSettings.runAsync()
+
         setThemeColor(store.getState().settings.themeColor)
 
-        if (checkLogin()) {
+        if (Token().value) {
             await initUserInfo.runAsync()
-        } else if (window.location.pathname.replace(/\//g, '') !== 'login') {
+        } else if (!inLoginPage()) {
             window.location.hash = '#/login'
         }
 
+        registerFunctions()
         registerCustomComponents()
+
         appLoaded()
     }
 

admin-views/src/layout/common/breadcrumb/index.tsx

@@ -7,7 +7,7 @@ import useRoute from "@/routes"
 import {Icon} from "@iconify/react"
 
 export const Breadcrumb = () => {
-    const [routes] = useRoute()
+    const {routes} = useRoute()
     const history = useHistory()
     const pathname = history.location.pathname
     const {settings} = useSelector((state: GlobalState) => state)

admin-views/src/layout/common/content/index.tsx

@@ -17,7 +17,7 @@ const ArcoContent = Layout.Content
 export const Content = ({menuCollapsed, noPadding}: { menuCollapsed?: boolean, noPadding?: boolean }) => {
     const {settings, appSettings} = useSelector((state: GlobalState) => state)
 
-    const [routes, defaultRoute] = useRoute()
+    const {routes, defaultRoute} = useRoute()
 
     const navbarHeight = 60
     const extraWidth = settings.layoutMode == 'double' ? 65 : 0

admin-views/src/layout/common/double-sider/index.tsx

@@ -24,7 +24,7 @@ export const DoubleSider = ({stateChange}) => {
     const {settings, appSettings} = useSelector((state: GlobalState) => state)
     const [collapsed, setCollapsed] = useState<boolean>(false)
     const routeMap = useRef<Map<string, React.ReactNode[]>>(new Map())
-    const [routes, defaultRoute] = useRoute()
+    const {routes, defaultRoute} = useRoute()
     const leftMenus = routes.filter((route) => !route.meta.hide)
 
     const defaultSelectedKeys = [currentComponent || defaultRoute]

admin-views/src/layout/common/menu/index.tsx

@@ -25,7 +25,7 @@ const Menu = (
     const pathname = history.location.pathname
     const currentComponent = qs.parseUrl(pathname).url.slice(1)
 
-    const [routes, defaultRoute] = useRoute()
+    const {routes, defaultRoute} = useRoute()
     const defaultSelectedKeys = [currentComponent || defaultRoute]
     const paths = (currentComponent || defaultRoute)?.split('/')
     const defaultOpenKeys = paths?.slice(0, paths.length - 1)

admin-views/src/layout/common/nav-bar/index.tsx

@@ -8,13 +8,13 @@ import IconButton from './components/icon-button'
 import Settings from './components/settings'
 import styles from './style/index.module.less'
 import Menu from '../menu'
-import {removeToken} from '@/utils/checkLogin'
 import {useRequest} from 'ahooks'
 import {fetchLogout} from '@/service/api'
 import AmisRender from '@/components/AmisRender'
 import {Breadcrumb} from '@/layout/common/breadcrumb'
 import Logo from '@/layout/common/Logo'
 import registerGlobalFunction from '@/utils/registerGlobalFunction'
+import {Token} from '@/utils/common'
 
 const UserMenu = ({userInfo, darkTheme}) => {
     if (!userInfo.menus) return null
@@ -54,7 +54,7 @@ function Navbar() {
     const logout = useRequest(fetchLogout, {
         manual: true,
         onSuccess() {
-            removeToken()
+            Token().clear()
             window.location.hash = "#/login"
         }
     })

admin-views/src/layout/common/tab-bar/index.tsx

@@ -11,7 +11,7 @@ import registerGlobalFunction from "@/utils/registerGlobalFunction"
 const TabBar = () => {
     const history = useHistory()
     const pathname = history.location.pathname
-    const [routes, defaultRoute] = useRoute()
+    const {routes, defaultRoute} = useRoute()
     const flattenRoutes = getFlattenRoutes(routes)
     const [cacheTabs, setCacheTab] = useStorage("cached_tabs", "")
     const cachedTabs = JSON.parse(cacheTabs || "[]")

admin-views/src/layout/layouts.tsx

@@ -15,7 +15,7 @@ import {useHistory} from 'react-router'
 export const PageLayout =  ({mode = 'default'}: { mode: string }) => {
     const [collapsed, setCollapsed] = useState<boolean>(false)
     const {settings} = useSelector((state: GlobalState) => state)
-    const [routes] = useRoute()
+    const {routes} = useRoute()
     const history = useHistory()
     const pathname = history.location.pathname
 

admin-views/src/layouts/DoubleLayout/index.tsx

@@ -16,7 +16,7 @@ const {Header, Sider, Content} = Layout
 
 export const DoubleLayout = () => {
     const [collapsed, setCollapsed] = useState(false)
-    const [routes] = useRoute()
+    const {routes} = useRoute()
     const history = useHistory()
     const pathname = history.location.pathname
 

admin-views/src/layouts/components/LayoutBreadcrumb/index.tsx

@@ -6,7 +6,7 @@ import {Breadcrumb} from 'antd'
 import {useHistory} from 'react-router'
 
 const LayoutBreadcrumb = () => {
-    const [routes, _, getCurrentRoute] = useRoute()
+    const {routes, getCurrentRoute} = useRoute()
     const {settings} = useSelector((state: GlobalState) => state)
     const [breadcrumb, setBreadcrumb] = useState<any[]>([])
     const history = useHistory()

admin-views/src/layouts/components/LayoutContent/index.tsx

@@ -15,7 +15,7 @@ const ArcoContent = Layout.Content
 
 const LayoutContent = () => {
     const {settings, appSettings} = useSelector((state: GlobalState) => state)
-    const [routes, defaultRoute] = useRoute()
+    const {routes, defaultRoute} = useRoute()
     const flattenRoutes = useMemo(() => getFlattenRoutes(routes) || [], [routes])
     const history = useHistory()
     const pathname = history.location.pathname

admin-views/src/layouts/components/LayoutFooter/index.tsx

@@ -1,4 +1,4 @@
-import useSettings from '@/hooks/userSettings'
+import useSettings from '@/hooks/useSetting'
 
 const LayoutFooter = () => {
     const {getSetting} = useSettings()

admin-views/src/layouts/components/LayoutLogo/index.tsx

@@ -1,5 +1,5 @@
 import {Image} from 'antd'
-import useSettings from '@/hooks/userSettings'
+import useSettings from '@/hooks/useSetting'
 
 const LayoutLogo = ({onlyLogo = false}) => {
     const {settings} = useSettings()

admin-views/src/layouts/components/LayoutMenu/index.tsx

@@ -23,7 +23,7 @@ const LayoutMenu = (
     const pathname = history.location.pathname
     const currentComponent = qs.parseUrl(pathname).url.slice(1)
 
-    const [routes, defaultRoute] = useRoute()
+    const {routes, defaultRoute} = useRoute()
     const defaultSelectedKeys = [currentComponent || defaultRoute]
     const paths = (currentComponent || defaultRoute)?.split('/')
     const defaultOpenKeys = paths?.slice(0, paths.length - 1)

admin-views/src/layouts/index.tsx

@@ -13,7 +13,7 @@ import {DoubleLayout} from '@/layouts/DoubleLayout'
 const Layout = () => {
     // default | top | top-mix | double
     const mode = 'default'
-    const [routes] = useRoute()
+    const {routes} = useRoute()
     const history = useHistory()
     const isSmallScreen = useSmallScreen()
     const [isSm, setIsSm] = useState<boolean>(isSmallScreen)