up

src/components/AuthButton/index.tsx

@@ -1,26 +1,20 @@
 import React, { ReactNode } from "react";
 import { Button } from "antd";
-import { getPowerInfo } from "@/utils/storage";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
 
 type Props = {
   [x: string]: any;
   children?: ReactNode;
   id: number;
 };
-// 根据权限来判断
-const powerInfo = getPowerInfo();
-const buttonArr = [] as any;
-powerInfo.forEach((v: any) => {
-  v.children.forEach((v2: any) => {
-    if (v2.authority) buttonArr.push(v2);
-  });
-});
 
 // console.log('有权限的按钮集合',buttonArr);
 
-
 function AuthButton({ children, id, ...rest }: Props) {
-  // console.log({ children, ...rest });
+  const buttonArr = useSelector(
+    (state: RootState) => state.loginStore.authButtonArr
+  );
 
   return buttonArr.some((v: any) => v.id === id) || id === -1 ? (
     <Button {...rest}>{children}</Button>

src/pages/Home/index.tsx

@@ -32,19 +32,20 @@ const tempDone = [
   { id: 5, done: false, path: "/object/6", num: 0, name: "藏品注销" },
 ];
 
-// 根据权限来判断
-const powerInfo = getPowerInfo();
-
-powerInfo.forEach((v: any) => {
-  if (v.id === 100) tabList[0].done = tempDone[0].done = true;
-  if (v.id === 200) tabList[1].done = true;
-  if (v.id === 300) tabList[2].done = tempDone[1].done = true;
-  if (v.id === 400) tabList[3].done = tempDone[2].done = true;
-  if (v.id === 500) tempDone[3].done = true;
-  if (v.id === 600) tabList[4].done = tempDone[4].done = true;
-});
-
 export default function Home() {
+  useEffect(() => {
+    // 根据权限来判断
+    const powerInfo = getPowerInfo();
+    powerInfo.forEach((v: any) => {
+      if (v.id === 100) tabList[0].done = tempDone[0].done = true;
+      if (v.id === 200) tabList[1].done = true;
+      if (v.id === 300) tabList[2].done = tempDone[1].done = true;
+      if (v.id === 400) tabList[3].done = tempDone[2].done = true;
+      if (v.id === 500) tempDone[3].done = true;
+      if (v.id === 600) tabList[4].done = tempDone[4].done = true;
+    });
+  }, []);
+
   // 实时时间
   const [nowTime, setNowTime] = useState(
     dayjs(Date.now()).format("YYYY年MM月DD HH:mm")

src/pages/Login/index.tsx

@@ -5,8 +5,8 @@ import { UserOutlined, LockOutlined } from "@ant-design/icons";
 import { useState } from "react";
 import { Base64 } from "js-base64";
 import encodeStr from "@/utils/pass";
-import { getPowerInfoAPI, userLoginAPI } from "@/store/action/login";
-import { setPowerInfo, setTokenInfo } from "@/utils/storage";
+import { userLoginAPI } from "@/store/action/login";
+import { setTokenInfo } from "@/utils/storage";
 import history from "@/utils/history";
 
 export default function Login() {
@@ -32,10 +32,6 @@ export default function Login() {
       // 用户信息存到本地
       setTokenInfo(res.data);
       history.push("/");
-      const res2: any = await getPowerInfoAPI();
-      const tempArr = res2.data.filter((v: any) => v.authority);
-      // 权限信息存到本地
-      setPowerInfo(tempArr);
     }
   };
 

src/pages/Object/index.tsx

@@ -1,6 +1,6 @@
 import styles from "./index.module.scss";
 import LeftBar from "@/components/LeftBar";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import SpinLoding from "@/components/SpinLoding";
 import { Route, Switch } from "react-router-dom";
 import AuthRoute from "@/components/AuthRoute";
@@ -139,59 +139,60 @@ const dataInTemp = [
   },
 ];
 
-// 根据权限来判断
-const powerInfo = getPowerInfo();
-
-console.log('ppppppppppp',powerInfo);
-
+export default function Object() {
+  const data = useRef<any>([]);
+  const dataIn = useRef<any>([]);
 
-powerInfo.forEach((v: any) => {
-  if (v.id === 100) {
-    dataTemp[0].done = true;
-    v.children.forEach((v2: any) => {
-      if (v2.id === 102 && v2.authority) dataInTemp[0].done = true;
-      if (v2.id === 105 && v2.authority) dataInTemp[1].done = true;
-    });
-  }
-  if (v.id === 200) dataTemp[1].done = true;
-  if (v.id === 300) {
-    dataTemp[2].done = true;
-    v.children.forEach((v2: any) => {
-      if (v2.id === 302 && v2.authority) dataInTemp[2].done = true;
-      if (v2.id === 305 && v2.authority) dataInTemp[3].done = true;
-    });
-  }
-  if (v.id === 400) {
-    dataTemp[3].done = true;
-    v.children.forEach((v2: any) => {
-      if (v2.id === 402 && v2.authority) dataInTemp[4].done = true;
-      if (v2.id === 405 && v2.authority) dataInTemp[5].done = true;
-    });
-  }
-  if (v.id === 500) {
-    v.children.forEach((v2: any) => {
-      if (v2.id === 505 && v2.authority) dataInTemp[6].done = true;
+  useEffect(() => {
+    // 根据权限来判断
+    const powerInfo = getPowerInfo();
+    powerInfo.forEach((v: any) => {
+      if (v.id === 100) {
+        dataTemp[0].done = true;
+        v.children.forEach((v2: any) => {
+          if (v2.id === 102 && v2.authority) dataInTemp[0].done = true;
+          if (v2.id === 105 && v2.authority) dataInTemp[1].done = true;
+        });
+      }
+      if (v.id === 200) dataTemp[1].done = true;
+      if (v.id === 300) {
+        dataTemp[2].done = true;
+        v.children.forEach((v2: any) => {
+          if (v2.id === 302 && v2.authority) dataInTemp[2].done = true;
+          if (v2.id === 305 && v2.authority) dataInTemp[3].done = true;
+        });
+      }
+      if (v.id === 400) {
+        dataTemp[3].done = true;
+        v.children.forEach((v2: any) => {
+          if (v2.id === 402 && v2.authority) dataInTemp[4].done = true;
+          if (v2.id === 405 && v2.authority) dataInTemp[5].done = true;
+        });
+      }
+      if (v.id === 500) {
+        v.children.forEach((v2: any) => {
+          if (v2.id === 505 && v2.authority) dataInTemp[6].done = true;
+        });
+        dataTemp[4].done = true;
+      }
+      if (v.id === 600) {
+        dataTemp[5].done = true;
+        v.children.forEach((v2: any) => {
+          if (v2.id === 602 && v2.authority) dataInTemp[7].done = true;
+          if (v2.id === 605 && v2.authority) dataInTemp[8].done = true;
+        });
+      }
     });
-    dataTemp[4].done = true;
-  }
-  if (v.id === 600) {
-    dataTemp[5].done = true;
-    v.children.forEach((v2: any) => {
-      if (v2.id === 602 && v2.authority) dataInTemp[7].done = true;
-      if (v2.id === 605 && v2.authority) dataInTemp[8].done = true;
-    });
-  }
-});
-const data = dataTemp.filter((v) => v.done);
-
-const dataIn = dataInTemp.filter((v) => v.done);
+    data.current = dataTemp.filter((v) => v.done);
+    console.log(1231231,data.current);
+    
+    dataIn.current = dataInTemp.filter((v) => v.done);
+    // 没有藏品登记页面的权限 跳到有权限的页面
+    if (data.current[0].id !== 1) {
+      history.replace(data.current[0].path);
+    }
+  }, []);
 
-// 没有藏品登记页面的权限 跳到有权限的页面
-if (data[0].id !== 1) {
-  history.replace(data[0].path);
-}
-
-export default function Object() {
   return (
     <div className={styles.Object}>
       <div className="leftBar">
@@ -201,7 +202,7 @@ export default function Object() {
       <div className="rightMain">
         <React.Suspense fallback={<SpinLoding />}>
           <Switch>
-            {data.map((v, i) => (
+            {data.current.map((v: any, i: number) => (
               <AuthRoute
                 exact
                 // exact={i === 0 ? true : false}
@@ -219,7 +220,7 @@ export default function Object() {
             <AuthRoute path="/object/6/look" component={LookObject6} />
 
             {/* 新增 */}
-            {dataIn.map((v) => (
+            {dataIn.current.map((v: any) => (
               <AuthRoute key={v.id} path={v.path} component={v.Com} />
             ))}
 

src/store/reducer/login.ts

@@ -23,12 +23,18 @@ const initState = {
   } as any,
   // 藏品的表格信息
   goodsTableList: [] as any,
+  // 关于按钮的权限信息
+  authButtonArr: [],
+  // 外层页面的权限信息
+  authPageArr:[]
 };
 
 type LoginActionType =
   | { type: "login/getSelectAll"; payload: any }
   | { type: "login/setFileData"; payload: any }
-  | { type: "login/setGoodsSonList"; payload: any };
+  | { type: "login/setGoodsSonList"; payload: any }
+  | { type: "login/setAuthButtonArr"; payload: any }
+  | { type: "login/setAuthPageArr"; payload: any };
 // 频道 reducer
 export default function loginReducer(
   state = initState,
@@ -44,7 +50,12 @@ export default function loginReducer(
     // 新增编辑藏品 的外层 表格信息（新增编辑页面下面的表格）
     case "login/setGoodsSonList":
       return { ...state, goodsTableList: action.payload };
-
+    // 关于按钮的权限信息
+    case "login/setAuthButtonArr":
+      return { ...state, authButtonArr: action.payload };
+    // 关于外层页面的权限信息
+    case "login/setAuthPageArr":
+      return { ...state, authPageArr: action.payload };
     default:
       return state;
   }