feat(react-ts): 增加路由守卫demo, 优化代码

template-react-ts/package.json

@@ -25,6 +25,7 @@
     "react-error-boundary": "^4.0.11",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.14.1",
+    "react-router-toolkit": "^1.0.0",
     "rxjs": "^7.8.1",
     "zustand": "^4.3.9"
   },
@@ -38,7 +39,7 @@
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@umijs/openapi": "^1.8.5",
+    "@umijs/openapi": "^1.9.2",
     "@vitejs/plugin-react": "^4.0.3",
     "csstype": "^3.1.2",
     "eslint": "^8.45.0",

template-react-ts/src/core/http/request.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosRequestConfig } from "axios";
 import { ILoginInfoStorageState, defaultLoginInfoStorage, loginInfoStorageKey } from "../store";
 import { getConfig } from "./config";
+import { notification } from "antd";
 
 const BASE_URL = getConfig().baseURL;
 
@@ -9,18 +10,29 @@ const instance = axios.create({
   headers: {
     "Content-Type": "application/json",
   },
-  timeout: 60000, // 超时时间60秒
+  timeout: 120000, // 超时时间120秒
 });
 
-instance.interceptors.response.use((response) => {
-  // 统一错误处理
-  // data解构
-  if (response.data) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    return response.data;
-  }
-  return response;
-});
+instance.interceptors.response.use(
+  (response) => {
+    // data解构
+    if (response.data) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return response.data;
+    }
+    return response;
+  },
+  (error) => {
+    // 统一错误处理
+    if (error.response.status >= 300) {
+      notification.error({
+        message: error.response.data?.msg,
+        duration: 2,
+      });
+    }
+    return Promise.reject(error);
+  },
+);
 
 instance.interceptors.request.use((config) => {
   const loginInfoStorageStr = globalThis.localStorage.getItem(loginInfoStorageKey);

template-react-ts/src/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { ConfigProvider } from "antd";
 import { CreateBrowserRouter } from "./core/router/CreateBrowserRouter";
-import { appRoutes } from "./routes";
+import { appRoutes } from "./rootRoutes";
 import { LazyImportComponent } from "./core/router/LazyImportComponent";
 import { TanStackQueryProvider } from "./core/http/TanStackQuery";
 

template-react-ts/src/mainLayout/MainLayoutComp.tsx

@@ -4,16 +4,16 @@ import { useLoginInfoStore } from "../core/store";
 import LogoMiniIcon from "../assets/images/logo_mini.svg";
 import LogoIcon from "../assets/images/logo.svg";
 import { uiListModuleName } from "../pages/ui-list/routes";
-import { BuildOutlined, ToolOutlined } from "@ant-design/icons";
-import { Dictionary, parseQueryString } from "../core/router/utils";
+import { BuildOutlined, DashboardOutlined, ToolOutlined } from "@ant-design/icons";
+import { Dictionary, parseQueryString } from "react-router-toolkit";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import { find } from "lodash-es";
-import { appRoutes } from "../routes";
+import { appRoutes } from "../rootRoutes";
 import { mainLayoutPath } from "./routes";
 import { getMenus } from "./utils";
 import { flexCenterOpts } from "../core/style/utils";
 import { useNavigate } from "react-router-dom";
-import { dashboardModuleName } from "../pages/module/routes";
+import { dashboardModuleName } from "../pages/dashboard/routes";
 import { utilListModuleName } from "../pages/util-list/routes";
 
 export const globalHiddenInMenuParentPath = "globalHiddenInMenuParentPath";
@@ -38,13 +38,14 @@ export function MenuComp() {
         queryObj = parseQueryString(query);
       }
       if (queryObj && queryObj[globalHiddenInMenuParentPath]) {
-        menuActivePath = queryObj[globalHiddenInMenuParentPath];
+        menuActivePath = queryObj[globalHiddenInMenuParentPath] as string;
       }
       setMenuActivePath([menuActivePath]);
     }
   }, [pathname]);
 
   const modulePathToIconMap = {
+    [dashboardModuleName]: <DashboardOutlined />,
     [uiListModuleName]: <BuildOutlined />,
     [utilListModuleName]: <ToolOutlined />,
   } as Dictionary<ReactNode>;
@@ -54,7 +55,7 @@ export function MenuComp() {
     return getMenus({
       routes: mainRoutes?.children || [],
       modulePathToIconMap,
-      to: mainLayoutPath,
+      to: `/${mainLayoutPath}`,
     });
   }, []);
 

template-react-ts/src/mainLayout/utils.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Dictionary } from "../core/router/utils";
+import { Dictionary } from "react-router-toolkit";
 import { map, startsWith } from "lodash-es";
 import { MenuProps } from "antd";
 import { Link, RouteObject } from "react-router-dom";
@@ -42,6 +42,7 @@ export const getMenus = ({
     return getItem({
       key: routePath,
       label: <Link to={routePath}>{item.id}</Link>,
+      icon: item.path && modulePathToIconMap?.[item.path],
     });
   });
 };

template-react-ts/src/pages/routes.tsx

@@ -1,4 +1,4 @@
-import { dashboardRoutes } from "./module/routes";
+import { dashboardRoutes } from "./dashboard/routes";
 import { uiListRoutes } from "./ui-list/routes";
 import { utilListRoutes } from "./util-list/routes";
 

template-react-ts/src/pages/util-list/RouterQueryDemo.tsx

@@ -0,0 +1,45 @@
+import { Card } from "antd";
+import ReactMarkdown from "react-markdown";
+
+export function RouterQueryDemo() {
+  const routerAuthDemo = `
+    ~~~js
+    export const mainRoutes: RouteObject = {
+      path: mainLayoutPath,
+      element: (
+        <ShouldLogon>
+          <Main />
+        </ShouldLogon>
+      ),
+      children: pagesRoutes,
+    };
+    
+    function ShouldLogon({ children }: { children: ReactNode }) {
+      const loginInfoStorageStr = globalThis.localStorage.getItem(loginInfoStorageKey);
+    
+      if (!loginInfoStorageStr) {
+        return <Navigate to="/login" />;
+      }
+    
+      const loginInfo = (JSON.parse(loginInfoStorageStr) as ILoginInfoStorageState).state.loginInfo;
+    
+      if (!loginInfo || !loginInfo.expireAt || dayjs().isAfter(dayjs(loginInfo.expireAt))) {
+        return <Navigate to="/login" />;
+      }
+    
+      return children;
+    }    
+    ~~~
+  `;
+
+  return (
+    <div css={{ "& > * + *": { marginTop: 12 } }}>
+      <Card title="npm包：react-router-toolkit" bordered={false}>
+        <a onClick={() => window.open("https://www.npmjs.com/package/react-router-toolkit")}>查看文档</a>
+      </Card>
+      <Card title="路由守卫" bordered={false}>
+        <ReactMarkdown>{routerAuthDemo}</ReactMarkdown>
+      </Card>
+    </div>
+  );
+}

template-react-ts/src/pages/util-list/routes.tsx

@@ -1,16 +1,20 @@
 import { RequestDemo } from "./RequestDemo";
+import { RouterQueryDemo } from "./RouterQueryDemo";
 
 export const utilListModuleName = "util-list";
-export const utilListModuleNameDefaultPath = "request";
-
 export const utilListRoutes = {
   path: utilListModuleName,
   id: "工具",
   children: [
     {
-      path: utilListModuleNameDefaultPath,
+      path: "request",
       id: "请求示例",
       element: <RequestDemo />,
     },
+    {
+      path: "router-toolkit",
+      id: "路由工具箱",
+      element: <RouterQueryDemo />,
+    },
   ],
 };