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

Author: rookie-luochao

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/core/router/UseQuery.ts

@@ -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/core/router/UseRouterQuery.ts

@@ -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/core/router/utils.ts

@@ -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],
     });
   });
 };