up

src/pages/Layout/index.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/utils/storage";
 import styles from "./index.module.scss";
 import classNames from "classnames";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Popconfirm, Button, Modal, Form, Input, message } from "antd";
 import React from "react";
 import { Route, Switch, useLocation } from "react-router-dom";
@@ -15,8 +15,13 @@ import SpinLoding from "@/components/SpinLoding";
 import AuthRoute from "@/components/AuthRoute";
 import { Base64 } from "js-base64";
 import encodeStr from "@/utils/pass";
-import { getSelectAllAPI, passWordEditAPI } from "@/store/action/login";
-import { useDispatch } from "react-redux";
+import {
+  getPowerInfoAPI,
+  getSelectAllAPI,
+  passWordEditAPI,
+} from "@/store/action/login";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
 
 const NotFound = React.lazy(() => import("../../components/NotFound"));
 
@@ -43,34 +48,62 @@ const tabListTemp = [
     name: "库房管理",
   },
 ];
-const temp = getTokenInfo().user.isAdmin;
-if (temp === 1)
-  tabListTemp.push({
-    id: 4,
-    done: true,
-    Com: React.lazy(() => import("../System")),
-    path: "/system",
-    name: "系统管理",
-  });
-
-// 根据权限来判断
-const powerInfo = getPowerInfo();
-powerInfo.forEach((v: any) => {
-  if (
-    v.id === 100 ||
-    v.id === 200 ||
-    v.id === 300 ||
-    v.id === 400 ||
-    v.id === 500 ||
-    v.id === 600
-  ) {
-    tabListTemp[1].done = true;
-  }
-});
-
-const tabList = tabListTemp.filter((v) => v.done);
 
 function Layout() {
+  const dispatch = useDispatch();
+
+  const tabList = useRef<any>(tabListTemp);
+
+  const [tabList,setTabList] =useState(tabListTemp)
+
+  // 进页面获取权限信息
+  const getPowerInfoAPIFu = useCallback(async () => {
+    const res = await getPowerInfoAPI();
+    const tempArr = res.data.filter((v: any) => v.authority);
+    // 页面权限信息存到仓库
+    dispatch({ type: "login/setAuthPageArr", payload: tempArr });
+    // 按钮的权限信息存到仓库
+    const buttonArr = [] as any;
+    tempArr.forEach((v: any) => {
+      v.children.forEach((v2: any) => {
+        if (v2.authority) buttonArr.push(v2);
+      });
+    });
+    dispatch({ type: "login/setAuthButtonArr", payload: buttonArr });
+  }, [dispatch]);
+
+  // 获取页面权限信息
+  const powerInfo =useSelector((state:RootState)=>state.loginStore.authPageArr)
+
+  useEffect(() => {
+    getPowerInfoAPIFu();
+
+    const temp = getTokenInfo().user.isAdmin;
+    if (temp === 1)
+      tabListTemp.push({
+        id: 4,
+        done: true,
+        Com: React.lazy(() => import("../System")),
+        path: "/system",
+        name: "系统管理",
+      });
+
+    powerInfo.forEach((v: any) => {
+      if (
+        v.id === 100 ||
+        v.id === 200 ||
+        v.id === 300 ||
+        v.id === 400 ||
+        v.id === 500 ||
+        v.id === 600
+      ) {
+        tabListTemp[1].done = true;
+      }
+    });
+
+    tabList.current = tabListTemp.filter((v) => v.done);
+  }, [getPowerInfoAPIFu]);
+
   const location = useLocation();
   const [path, setPath] = useState("");
 
@@ -123,10 +156,8 @@ function Layout() {
     removeTokenInfo();
     removePowerInfo();
     history.push("/login");
-    
   };
 
-  const dispatch = useDispatch();
   // 进来获取所有的下拉列表信息
   useEffect(() => {
     dispatch(getSelectAllAPI());
@@ -138,7 +169,7 @@ function Layout() {
         <div className="main">
           <div className="logo"></div>
           <div className="tabCut">
-            {tabList.map((v) => (
+            {tabList.current.map((v: any) => (
               <div
                 onClick={() => pathCutFu(v.path)}
                 className={classNames("row", v.path === path ? "active" : "")}
@@ -168,7 +199,7 @@ function Layout() {
       <div className="pageMain">
         <React.Suspense fallback={<SpinLoding />}>
           <Switch>
-            {tabList.map((v, i) => (
+            {tabList.current.map((v: any, i: number) => (
               <AuthRoute
                 key={v.id}
                 exact={i === 0 ? true : false}