温华: 配置stores终端缓存黑名单

.gitignore

@@ -13,7 +13,7 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
+.vscode
 !.vscode/extensions.json
 .idea
 .DS_Store

src/App.tsx

@@ -3,7 +3,8 @@ import './App.css'
 import LayOut from './layout'
 import ParentView from './ParentView'
 import Loading from './Loading'
-import currentRouter, { RouteInterception } from './router'
+import currentRouter from './router'
+import RouteInterception from './router/RouteInterception'
 import { useDispatch, useSelector } from 'react-redux'
 import { Suspense, lazy, useEffect, useState } from 'react'
 const Views = import.meta.glob('./view/**/*.tsx')
@@ -27,7 +28,6 @@ const transferReactNode = (comp: string) => {
 function App() {
   const routes: [] = useSelector((store: any) => store.permission)
   const [allRoutes, setAllRoutes] = useState(currentRouter)
-  const dispatch = useDispatch()
   const element = useRoutes(allRoutes)
   // 转换路由对象
   const transferRouteObject = (routes: Array<any>) => {

src/layout/sidebar/index.tsx

@@ -2,10 +2,11 @@ import { Menu } from 'antd'
 import React, {Fragment, useEffect, useState} from 'react'
 import { useDispatch, useSelector } from 'react-redux';
 import { generateMenu } from '../../permission';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 export default function SideBar() {
   const navigate = useNavigate()
+  const location = useLocation()
   const routes: [] = useSelector((store: any)=>store.permission)
   const dispatch = useDispatch()
   const [menuItem, setMenuItem] = useState<Array<any>>([{
@@ -21,6 +22,8 @@ export default function SideBar() {
     }
   }
   const goPage = (val: any) => {
+    console.log(val);
+    
     navigate(val.key)
   }
   useEffect(()=>{
@@ -32,7 +35,7 @@ export default function SideBar() {
       <Menu
         theme="dark"
         mode="inline"
-        defaultSelectedKeys={['1']}
+        defaultSelectedKeys={[location.pathname]}
         items={menuItem}
         onClick={goPage}
       />

src/router/RouteInterception.tsx

@@ -0,0 +1,29 @@
+import { Navigate } from "react-router-dom"
+import Notfound from "../Notfound"
+import { getToken } from "../utils/auth"
+
+const Views = import.meta.glob('../view/**/*.tsx')
+// 判断是否有对应路径的映射文件
+const hasMapFile = (filePath: string): boolean => {
+  return Views[`../view/${filePath}.tsx`] ? true : false
+}
+
+/**
+ * @author {温华}
+ * @description 路由拦截组件
+ * @param {children: ReactDOM, filePath: string(文件路径)}  
+ */
+export default function RouteInterception ({children, filePath=""}: any) {
+  if(getToken()) {
+    if(filePath!=="") {
+      if(hasMapFile(filePath)) {
+        return children
+      } else {
+        return <Notfound />
+      }
+    }
+    return children
+  } else {
+    return <Navigate to='/login' />
+  }
+}

src/router/index.tsx

@@ -2,10 +2,8 @@ import { getToken } from '../utils/auth'
 import LayOut from '../layout/index'
 import Home from '../view/home'
 import { Suspense, lazy } from 'react'
-import { Navigate } from 'react-router-dom'
 import Loading from '../Loading'
-import Notfound from '../Notfound'
-const Views = import.meta.glob('../view/**/*.tsx')
+import RouteInterception from './RouteInterception'
 interface Meta {
   title: string,
   redirect?: boolean
@@ -27,29 +25,6 @@ const lazyLoad = (viewName: string) => {
   return <View/>
 }
 
-// 判断是否有对应路径的映射文件
-const hasMapFile = (filePath: string): boolean => {
-  let flag: boolean = false
-  Views[`../view/${filePath}.tsx`] ? flag = true : flag = false
-  return flag
-}
-
-// 路由拦截
-export const RouteInterception = ({children, filePath=""}: any) => {
-  if(getToken()) {
-    if(filePath!=="") {
-      if(hasMapFile(filePath)) {
-        return children
-      } else {
-        return <Notfound />
-      }
-    }
-    return children
-  } else {
-    return <Navigate to='/login' />
-  }
-}
-
 // 常驻路由
 const currentRouter: Array<route> = [
   {

src/stores/index.ts

@@ -7,7 +7,8 @@ import permissionSlice from "./permission";
 
 const persistConfig = {
   key: 'root',
-  storage
+  storage,
+  blacklist: ['cache','sidebar'] // 黑名单, 不做终端缓存的内容
 }
 
 const reducers = combineReducers({
@@ -19,7 +20,10 @@ const reducers = combineReducers({
 // configureStore创建一个redux数据
 const persistedReducer = persistReducer(persistConfig, reducers)
 const store = configureStore({
-  reducer: persistedReducer
+  reducer: persistedReducer,
+  middleware:(getDefaultMiddleware) => getDefaultMiddleware({
+    serializableCheck: false
+  })
 })
 
 export const persistor = persistStore(store)