f

package-lock.json

@@ -12,7 +12,7 @@
         "@ant-design/pro-components": "^2.3.13",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-react": "^1.0.6",
-        "@zjxpcyc/react-tiny-store": "^2.0.1",
+        "@zjxpcyc/react-tiny-store": "^3.0.3",
         "antd": "^4.23.4",
         "axios": "^1.2.0",
         "classnames": "^2.3.2",
@@ -1278,9 +1278,9 @@
       }
     },
     "node_modules/@zjxpcyc/react-tiny-store": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmmirror.com/@zjxpcyc/react-tiny-store/-/react-tiny-store-2.0.6.tgz",
-      "integrity": "sha512-NpF7bHWzpgM4PwG1tSnS38HQFxQaAvFGSxzqKu/t5wV96Vm5sclQr9Lmy2/kjKBNLpoURrR76UCwD9EU+RHejg=="
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/@zjxpcyc/react-tiny-store/-/react-tiny-store-3.0.3.tgz",
+      "integrity": "sha512-x/la2wJVUFH7FV+xgtXBOT6Ba2AAsuLq+OkU8UFrrcfz9M4JrqWyt7Dz8TUiO3EoYkMiRz8FD++QggdR2HquJA=="
     },
     "node_modules/add-dom-event-listener": {
       "version": "1.1.0",
@@ -4708,9 +4708,9 @@
       "requires": {}
     },
     "@zjxpcyc/react-tiny-store": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmmirror.com/@zjxpcyc/react-tiny-store/-/react-tiny-store-2.0.6.tgz",
-      "integrity": "sha512-NpF7bHWzpgM4PwG1tSnS38HQFxQaAvFGSxzqKu/t5wV96Vm5sclQr9Lmy2/kjKBNLpoURrR76UCwD9EU+RHejg=="
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/@zjxpcyc/react-tiny-store/-/react-tiny-store-3.0.3.tgz",
+      "integrity": "sha512-x/la2wJVUFH7FV+xgtXBOT6Ba2AAsuLq+OkU8UFrrcfz9M4JrqWyt7Dz8TUiO3EoYkMiRz8FD++QggdR2HquJA=="
     },
     "add-dom-event-listener": {
       "version": "1.1.0",

package.json

@@ -13,7 +13,7 @@
     "@ant-design/pro-components": "^2.3.13",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-react": "^1.0.6",
-    "@zjxpcyc/react-tiny-store": "^2.0.1",
+    "@zjxpcyc/react-tiny-store": "^3.0.3",
     "antd": "^4.23.4",
     "axios": "^1.2.0",
     "classnames": "^2.3.2",

src/layouts/AuthLayout/Main.jsx

@@ -18,7 +18,6 @@ export default (props) => {
   const location = useLocation();
   const menus = getMenuItems(authRoutes);
 
-  // console.log('menus', menus)
 
   return (
     <Layout className={theme} style={{ height: "100vh" }}>

src/layouts/AuthLayout/RequireLogin.jsx

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useModel } from "@/store";
+
+export default (props) => {
+  const { user, getCurrentUser } = useModel("user");
+  const navigate = useNavigate();
+  const [userStatus, setUserStatus] = useState(user && user.userId ? 1 : 0);
+
+  useEffect(() => {
+    if (!user || !user.userId) {
+      getCurrentUser()
+        .then((res) => {
+          setUserStatus(1);
+        })
+        .catch((err) => {
+          console.error(err);
+          setUserStatus(-1);
+        });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (userStatus === -1) {
+      navigate("/login?isBack=true");
+      return;
+    }
+  }, [userStatus]);
+
+  return userStatus < 1 ? null : props.children;
+};

src/layouts/AuthLayout/components/Header/User.jsx

@@ -109,12 +109,12 @@ export default (props) => {
       passRef.current.show();
     }
   };
-
+console.log(user)
   return (
     <Dropdown menu={{ items, onClick }}>
       <div className="user-info">
-        <Avatar size={24} src={user.account || <DefaultAvatar />} />
-        <span className="font">{user.userName}</span>
+        <Avatar size={24} src={user?.account || <DefaultAvatar />} />
+        <span className="font">{user?.userName}</span>
         <ChangePassword user={user} ref={passRef} />
       </div>
     </Dropdown>

src/layouts/AuthLayout/index copy.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Spin } from "antd";
+import HtmlTitle from "./components/HtmlTitle";
+// import Main from './Main';
+import withLogin from "./withLogin";
+
+const Spinner = () => (
+  <div
+    style={{
+      width: "100%",
+      height: "100%",
+      display: "grid",
+      placeItems: "center",
+    }}
+  >
+    <Spin />
+  </div>
+);
+
+export default (props) => {
+  const RequireLogin = React.lazy(() => {
+    return withLogin(import("./Main"));
+  });
+
+  return (
+    <>
+      <HtmlTitle />
+      <React.Suspense fallback={<Spinner />}>
+        <RequireLogin />
+      </React.Suspense>
+    </>
+  );
+};

src/layouts/AuthLayout/index.jsx

@@ -1,8 +1,18 @@
 import React from "react";
-import { Spin } from "antd";
+import { Spin, Layout } from "antd";
 import HtmlTitle from "./components/HtmlTitle";
 // import Main from './Main';
 import withLogin from "./withLogin";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useModel } from "@/store";
+
+import SiderBar from "./components/SiderBar";
+import Header from "./components/Header";
+import Container from "./components/Container";
+import { authRoutes } from "@/routes/routes";
+import { getMenuItems } from "@/routes/menus";
+import RequireLogin from "./RequireLogin";
+import "./style.less";
 
 const Spinner = () => (
   <div
@@ -18,16 +28,30 @@ const Spinner = () => (
 );
 
 export default (props) => {
-  const RequireLogin = React.lazy(() => {
-    return withLogin(import("./Main"));
-  });
-
+  const { theme } = useModel("system");
+  const { user, menus } = useModel("user");
+  const navigate = useNavigate();
+  const location = useLocation();
+  // const menus = getMenuItems(authRoutes);
+  // const RequireLogin = React.lazy(() => {
+  //   return withLogin(import("./Main"));
+  // });
+  console.log(menus);
+  console.log(user);
   return (
-    <>
+    <Spin spinning={!user} size="large">
       <HtmlTitle />
-      <React.Suspense fallback={<Spinner />}>
-        <RequireLogin />
-      </React.Suspense>
-    </>
+      {/* <React.Suspense fallback={<Spinner />}> */}
+      <RequireLogin>
+        <Layout className={theme} style={{ height: "100vh" }}>
+          <Header theme={theme} user={user} />
+          <Layout style={{ height: "calc(100vh - var(--header-height))" }}>
+            <SiderBar theme={theme} menus={menus} location={location} />
+            <Container location={location} />
+          </Layout>
+        </Layout>
+      </RequireLogin>
+      {/* </React.Suspense> */}
+    </Spin>
   );
 };

src/pages/login/components/qrcode.module.less

@@ -30,8 +30,8 @@
     display: grid;
     place-items: center;
   
-    .status-tip {
-    }
+    // .status-tip {
+    // }
   }
 
   .tip-box {

src/routes/Router.jsx

@@ -5,7 +5,7 @@ import { defaultRoutes } from './routes';
 
 export default (props) => {
   const { routes } = useModel('user');
-
+// console.log(routes)
   const router = React.useMemo(() => {
     if (!routes || routes.length < 1) {
       return createHashRouter(defaultRoutes);

src/routes/routes.jsx

@@ -1,7 +1,7 @@
 import {
   UserOutlined,
   SolutionOutlined,
-  FileTextOutlined
+  FileTextOutlined,
 } from "@ant-design/icons";
 import { Outlet, Navigate } from "react-router-dom";
 import AuthLayout from "@/layouts/AuthLayout";
@@ -37,7 +37,7 @@ export const authRoutes = [
     meta: {
       title: "客户管理",
       icon: <SolutionOutlined />,
-    }
+    },
   },
   {
     path: "custom/edit",
@@ -53,7 +53,7 @@ export const authRoutes = [
     meta: {
       title: "项目管理",
       icon: <FileTextOutlined />,
-    }
+    },
   },
   {
     path: "project/edit",
@@ -61,7 +61,7 @@ export const authRoutes = [
     meta: {
       title: "项目维护",
       hideInMenu: true,
-    }
+    },
   },
   {
     path: "user",
@@ -69,7 +69,7 @@ export const authRoutes = [
     meta: {
       title: "人员管理",
       icon: <UserOutlined />,
-    }
+    },
   },
   {
     path: "user/edit",
@@ -77,7 +77,7 @@ export const authRoutes = [
     meta: {
       title: "人员维护",
       hideInMenu: true,
-    }
+    },
   },
 ];
 
@@ -100,22 +100,19 @@ export const defaultRoutes = [
     path: "*",
     element: <Page404 />,
   },
-
 ];
 
-export function mergeAuthRoutes (r1, r2) {
+export function mergeAuthRoutes(r1, r2) {
   const r = r1.slice();
   const children = r1[0].children.slice();
   r[0].children = children.concat(r2);
-  // console.log('r', r);
-  // console.log('children', children);
-  // console.log('r[0].children', r[0].children);
+  console.log(r)
   return r;
 }
 
 // 全部路由
 export const routes = mergeAuthRoutes(defaultRoutes, authRoutes);
-function getPath (parent = "/", current = "") {
+function getPath(parent = "/", current = "") {
   if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
     return current;
   return `${parent}/${current}`.replace(/\/\//g, "/");

src/store/models/user.js

@@ -1,26 +1,31 @@
 import { useState, useRef } from "react";
 import { defaultRoutes, authRoutes, mergeAuthRoutes } from "@/routes/routes";
 import { getMenuItems } from "@/routes/menus";
-// import { getAuthedRoutes } from "@/routes/permissions";
 import { currentUser } from "@/services/login";
+import { getAuthedRoutes } from "@/routes/permissions";
 
 export default function useUser() {
-  const [user, setUser] = useState({});
+  const [user, setUser] = useState(null);
   const menusRef = useRef();
   const routesRef = useRef();
 
-  const getCurrentUser = async () => 
-  new Promise((resolve, reject) => {
-    currentUser()
-      .then((res) => {
-        setUser(res);
-        menusRef.current = getMenuItems(authRoutes);
-        routesRef.current = mergeAuthRoutes(defaultRoutes);
-        // console.log('menusRef.current', menusRef.current)
-        resolve(res);
-      })
-      .catch(reject);
-  });
+  const getCurrentUser = () =>
+    new Promise((resolve, reject) => {
+      currentUser()
+        .then((res) => {
+          console.log(res);
+          // authRoutes 是所有待验证授权的路由
+          // authedRoutes 是已经被授权的路由
+          const authedRoutes = getAuthedRoutes(authRoutes, []);
+
+          menusRef.current = getMenuItems(authedRoutes);
+          routesRef.current = mergeAuthRoutes(defaultRoutes, authedRoutes);
+
+          setUser(res);
+          resolve();
+        })
+        .catch(reject);
+    });
 
   return {
     user,