feat: 完成登录路由拦截功能

src/layout/feature/components/UserDropdown.tsx

@@ -2,7 +2,7 @@ import type { MenuProps } from 'antd'
 import { Space, Dropdown } from 'antd'
 import { LockOutlined, PoweroffOutlined } from '@ant-design/icons'
 import { useNavigate } from 'react-router-dom'
-import { getAuthCache } from '@/utils/auth'
+import { getAuthCache, clearAuthCache } from '@/utils/auth'
 import { TOKEN_KEY } from '@/enums/cacheEnum'
 import { useAppDispatch, useAppSelector } from '@/stores'
 import { useMessage } from '@/hooks/web/useMessage'
@@ -11,7 +11,6 @@ import { resetState } from '@/stores/modules/userSlice'
 import headerImg from '@/assets/images/avatar.png'
 
 export default function UserDropdown() {
-
   const items: MenuProps['items'] = [
     {
       key: 'lock',
@@ -52,7 +51,6 @@ export default function UserDropdown() {
     return token || getAuthCache<string>(TOKEN_KEY)
   }
 
-
   const handleLock = () => {}
 
   const handleLogout = () => {
@@ -78,15 +76,13 @@ export default function UserDropdown() {
       }
     }
     dispatch(resetState())
+    clearAuthCache()
     goLogin && navigate('/login')
   }
 
   return (
     <Dropdown menu={{ items, onClick }} placement='bottomRight' arrow>
-      <span
-        className='flex-center'
-        style={{cursor: 'pointer'}}
-      >
+      <span className='flex-center' style={{ cursor: 'pointer' }}>
         <img
           src={headerImg}
           style={{

src/router/constant.tsx

@@ -0,0 +1,10 @@
+import { BasicLayout } from '@/layout'
+import { GuardRoute } from './guardRoute'
+
+export const LayoutGuard = () => {
+  return (
+    <GuardRoute>
+      <BasicLayout />
+    </GuardRoute>
+  )
+}

src/router/guardRoute.tsx

@@ -0,0 +1,17 @@
+import { Navigate } from 'react-router-dom'
+import { getAuthCache } from '@/utils/auth'
+import { TOKEN_KEY } from '@/enums/cacheEnum'
+import { useAppSelector } from '@/stores'
+
+export const GuardRoute = (props: { children: JSX.Element }) => {
+  const { token } = useAppSelector(state => state.user)
+  const getToken = (): string => {
+    return token || getAuthCache<string>(TOKEN_KEY)
+  }
+
+  if (getToken()) {
+    return props.children
+  } else {
+    return <Navigate to='/login' replace />
+  }
+}

src/router/routes/compo.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // component module page
 const CompoRoute: RouteObject = {
   path: '/compo',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '组件',
     icon: 'compo',

src/router/routes/excel.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // excel module page
 const ExcelRoute: RouteObject = {
   path: '/excel',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: 'Excel',
     icon: 'excel',

src/router/routes/exception.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // exception module page
 const ExceptionRoute: RouteObject = {
   path: '/exception',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '异常页面',
     icon: 'bug',

src/router/routes/form.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // form module page
 const FormRoute: RouteObject = {
   path: '/form',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '表单',
     icon: 'form',

src/router/routes/graph-editor.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // graph-editor module page
 const GraphEditorRoute: RouteObject = {
   path: '/graph-editor',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '图形编辑器',
     icon: 'flow',

src/router/routes/home.tsx

@@ -1,11 +1,11 @@
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import Home from '@/views/home'
 
 // Home route
 const HomeRoute: RouteObject = {
   path: '/home',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '首页',
     icon: 'home',

src/router/routes/images.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // image module page
 const ImageRoute: RouteObject = {
   path: '/image',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '图片处理',
     icon: 'image',

src/router/routes/table.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // table module page
 const TableRoute: RouteObject = {
   path: '/table',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '表格',
     icon: 'table',

src/router/routes/text-editor.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // text-editor module page
 const TextEditorRoute: RouteObject = {
   path: '/editor',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '文本编辑器',
     icon: 'editor',

src/router/routes/tree.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // tree module page
 const TreeRoute: RouteObject = {
   path: '/tree',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '树形结构',
     icon: 'tree',

src/router/routes/video.tsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 import { RouteObject } from '../types'
-import { BasicLayout } from '@/layout'
+import { LayoutGuard } from '../constant'
 import lazyLoad from '../lazyLoad'
 
 // video module page
 const VideoRoute: RouteObject = {
   path: '/video',
-  element: <BasicLayout />,
+  element: <LayoutGuard />,
   meta: {
     title: '视频处理',
     icon: 'video',