项目初始化04

src/hooks/usePass.ts

+import { operation, route } from "@/router";
+import { useStores } from "@/store";
+import { useCallback } from "react";
+
+const usePass = () => {
+  const { permissionStore } = useStores();
+
+  const isPass = useCallback(
+    (key: string, routes?: Array<route | operation>): boolean => {
+      if (routes) {
+        for (let item of routes) {
+          if (item.id === key) {
+            return true;
+          } else if (
+            item.type === "page" &&
+            item.children?.length &&
+            isPass(key, item.children)
+          ) {
+            return true;
+          }
+        }
+      } else {
+        for (let item of permissionStore.allRoutes) {
+          if (item.type !== "navigate" && item.id === key) {
+            return true;
+          } else if (
+            item.type === "page" &&
+            item.children?.length &&
+            isPass(key, item.children)
+          ) {
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    [permissionStore.allRoutes]
+  );
+
+  return isPass;
+};
+
+export default usePass;

src/router/index.ts

@@ -10,10 +10,10 @@ export type route = {
   type: "page";
   name: string;
   path: string;
-  element: React.FC<{ childrenRoutes?: Array<route | navigate | operation> }>;
+  element: React.FC<{ childrenRoutes?: Array<route | operation> }>;
   icon?: string;
   show?: boolean;
-  children?: Array<route | navigate | operation>;
+  children?: Array<route | operation>;
 };
 
 export type navigate = {
@@ -32,7 +32,7 @@ export const elements: {
   [x: string]: ({
     childrenRoutes,
   }: {
-    childrenRoutes?: Array<operation>;
+    childrenRoutes?: Array<route | operation>;
   }) => JSX.Element;
 } = {
   Demo: Demo,

src/store/modules/permission.ts

@@ -6,7 +6,7 @@ class Permission {
     makeAutoObservable(this);
   }
 
-  allRoutes: Array<route | navigate> = [];
+  allRoutes: Array<route | navigate | operation> = [];
   addRoutes: Array<Array<route>> = [];
   sidebarRouters: Array<route> = [];
 

src/views/demo/index.tsx

 import { useMessage } from "@/components/MySnackbar";
-import { operation } from "@/router";
+import usePass from "@/hooks/usePass";
+import { operation, route } from "@/router";
 import { Button } from "@mui/material";
 import { Box } from "@mui/system";
-import React from "react";
+import { useEffect } from "react";
 
-const Demo = ({ childrenRoutes }: { childrenRoutes?: Array<operation> }) => {
+const Demo = ({
+  childrenRoutes,
+}: {
+  childrenRoutes?: Array<route | operation>;
+}) => {
   const message = useMessage();
+  const isPass = usePass();
+
+  useEffect(() => {
+    console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111");
+    console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222");
+    console.log(isPass("test"), "33333");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <Box>