[dynamicRoutes] 动态路由解决方案。

[xXAvoraXx]

你好，我正在使用 Ant Design Pro V5，研究如何创建动态路由。在我的研究中，我找到了一些示例，并且通过修改这些示例，我得到了一个可工作的版本。我想与您分享这些代码并讨论一下。

utils-> dynamicRoutes-> index.ts

import EmptyRoute from '@/.umi/core/EmptyRoute';
import LazyLoadable from '@/components/LazyLoadable';
import { isNaN, isNumber } from 'lodash';
import { lazy } from 'react';
import type { DynamicRoutes } from './typing';

function generateComponentPath(inputPath: string): string {
  // 去掉开头的 './' 部分
  let newPath = inputPath.replace('./', '');

  // 在末尾添加 '/index'
  newPath = newPath + '/index';

  return newPath;
}

function findLastRouteIndex(obj: any): number {
  let maxNumberKey = 0;

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const keyString = key.toString();
      const keyNumber = parseInt(keyString);
      if (isNaN(keyNumber) === false && isNumber(keyNumber)) {
        if (maxNumberKey === null || keyNumber > maxNumberKey) {
          maxNumberKey = keyNumber;
        }
      }
    }
  }

  return maxNumberKey;
}

export function parseRoutes(
  routesRaw: DynamicRoutes.RouteRaw[],
  currentRoutes: DynamicRoutes.RouteRaw[],
): DynamicRoutes.ParseRoutesReturnType {
  const routes: DynamicRoutes.ParsedRoutes = {}; // 转换后的路由信息
  const routeComponents: DynamicRoutes.ParsedRouteComponent = {}; // 生成的 React.lazy 组件
  const routeParentMap = new Map<string, number>(); // 菜单标识与路由数组索引之间的映射，例如：'role_management' -> 7

  let currentIndex = findLastRouteIndex(currentRoutes) + 1; // 当前正在处理的路由项的索引。可以将传入 patchRoutes 的路由项视为数组，这里的 currentIndex 就类似于数组中的元素索引。

  routesRaw.forEach((route) => {
    let effectiveRoute = true; // 当前处理的路由是否有效？

    const replaceRoute = Object.entries(currentRoutes).find((x) => x[1].key === route.key);
    const tempRoute = { ...route };

    if (tempRoute.routes) {
      delete tempRoute.routes;
    }

    if (replaceRoute) {
      // 如果有替换路由情况。
      const replaceRouteIndex = replaceRoute[0];
      const replaceRouteMap: DynamicRoutes.Route = {
        ...route,
        id: replaceRouteIndex,
      };
      // 保存路由信息
      routes[parseInt(replaceRouteIndex)] = replaceRouteMap;
    } else {
      // 如果有组件则创建并保存。
      if (route.component) {
        const componentPath = generateComponentPath(route.component);
        // 创建组件
        const tempComponent = LazyLoadable(lazy(() => import(`@/pages/${componentPath}`)));
        // 保存组件
        routeComponents[currentIndex] = tempComponent;
      } // 如果没有该路由的页面。
      else {
        // 该路由没有自己的页面，这里创建一个 Outlet 来展示子路由的页面
        const tempComponent = EmptyRoute;
        // 保存 Outlet
        routeComponents[currentIndex] = tempComponent;
      }

      if (route.parentKeys === undefined || (route.parentKeys && route.parentKeys.length === 0)) {
        // 当前项为一级路由
        // 创建路由信息
        const mainRouteMap: DynamicRoutes.Route = {
          ...tempRoute,
          id: currentIndex.toString(),
          parentId: 'ant-design-pro-layout',
        };
        // 保存路由信息
        routes[currentIndex] = mainRouteMap;

        // 将菜单标识与当前项索引进行映射
        routeParentMap.set(route.key!, currentIndex);

        if (route.routes && route.routes.length > 0) {
          const mergeRoutes = { ...currentRoutes };
          Object.assign(mergeRoutes, { [currentIndex]: mainRouteMap });
          const { routes: childRoutes, routeComponents: childComponents } = parseRoutes(
            route.routes,
            mergeRoutes,
          );

          if (
            childRoutes &&
            Object.keys(childRoutes).length > 0 &&
            childComponents &&
            Object.keys(childComponents).length > 0
          ) {
            const childRoutesLength = Object.keys(childRoutes).length;
            const childComponentsLength = Object.keys(childComponents).length;

            if (childRoutesLength === childComponentsLength) {
              Object.assign(routes, childRoutes);
              Object.assign(routeComponents, childComponents);
              currentIndex += childRoutesLength;
            }
          }
        }
      } // 是否为直接显示的（不包含子路由）路由记录？例如：/home; /Dashboard
      else if (route.parentKeys && route.parentKeys.length > 0) {
        // 不是一级路由
        // 获取真正的上级路由标识

        const parentKeys = route.parentKeys[0];

        const routeParentMapKey = routeParentMap.get(parentKeys);
        const currentRoutesParentKey = Object.entries(currentRoutes).find(
          (x) => x[1].key === parentKeys,
        );

        if (
          routeParentMapKey ||
          (currentRoutesParentKey !== undefined && currentRoutesParentKey.length > 0)
        ) {
          const routeMap: DynamicRoutes.Route = {
            ...tempRoute,
            id: currentIndex.toString(),
            parentId: (routeParentMapKey || currentRoutesParentKey![0]).toString(),
          };
          // 保存路由信息
          routes[currentIndex] = routeMap;
        } else {
          // 未找到上级路由，该路由无效，不增加 currentIndex
          effectiveRoute = false;
        }
      }

      if (effectiveRoute) {
        // 如果路由有效，则增加 currentIndex
        currentIndex += 1;
      }
    }
  });

  return {
    routes,
    routeComponents,
  };
}

utils -> dynamicRoutes -> typing.d.ts

import type { Outlet } from '@umijs/max';
import type { ComponentType, LazyExoticComponent } from 'react';

declare namespace DynamicRoutes {
  // 基于从服务器获取的数据创建的前端路由数据
  interface Route {
    id: string;
    path: string;
    name?: string;
    component?: string;
    icon?: string;
    access?: string;
    parentId?: 'ant-design-pro-layout' | string;
    locale?: string;
    target?: string;
    navTheme?: 'dark' | 'light' | 'realDark' | undefined;
    layout?: 'side' | 'top' | 'mix';
    headerTheme?: 'dark' | 'light';
    flatMenu?: boolean;
    headerRender?: boolean;
    footerRender?: boolean;
    menuRender?: boolean;
    menuHeaderRender?: boolean;
    fixedHeader?: boolean;
    fixSiderbar?: boolean;
    hideInMenu?: boolean;
    hideChildrenInMenu?: boolean;
    hideInBreadcrumb?: boolean;
    redirect?: string;
    disabled?: boolean;
  }

  // 从服务器获取的路由数据以 RouteRaw[] 形式存在
  interface RouteRaw extends Omit<Route, 'id' | 'parentId'> {
    key: string;
    parentKeys?: 'ant-design-pro-layout' | string[];
    routes?: RouteRaw[]
  }

  // 基于从服务器获取的数据创建的 React.lazy 延迟加载组件或 Outlet（一级路由）
  type RouteComponent = LazyExoticComponent<ComponentType<any>> | typeof Outlet;

  // parseRoutes 函数的参数 { routes, routeComponents } 可以解析为以下形式
  // 此类型用于 Object.assign(routes, parsedRoutes) 操作，合并路由数据
  interface ParsedRoutes {
    [key: number]: Route;
  }

  // 此类型用于 Object.assign(routeComponents, parsedRoutes) 操作，合并路由组件
  interface ParsedRouteComponent {
    [key: number]: RouteComponent;
  }

  // parseRoutes 函数的返回值类型
  interface ParseRoutesReturnType {
    routes: DynamicRoutes.ParsedRoutes;
    routeComponents: DynamicRoutes.ParsedRouteComponent;
  }
}

utils -> dynamicRoutes -> routes.ts

import { DynamicRoutes } from './typing';

const studentRoutes: DynamicRoutes.RouteRaw[] = [
  {
    key: 'welcome',
    path: '/welcome',
    name: 'welcome',
    icon: 'smile',
    access: 'canStudent',
    hideInMenu: true,
    menuRender: false,
  },
  {
    key: 'preregistration',
    path: '/pre-registration',
    name: 'preregistration',
    icon: 'smile',
    access: 'canStudent',
    hideInMenu: true,
    menuRender: false,
  },
  {
    key: 'redirect',
    path: '/',
    redirect: '/welcome',
  },
];

const adminRoutes: DynamicRoutes.RouteRaw[] = [
  {
    key: 'dashboard',
    path: '/dashboard',
    name: 'dashboard',
    icon: 'smile',
    access: 'canAdmin',
    component: './Dashboard',
  },
  {
    key: 'preparation',
    path: '/preparation',
    name: 'preparation',
    icon: 'crown',
    access: 'canAdmin',
    routes: [
      {
        key: 'preparationRedirect',
        path: '/preparation',
        redirect: '/preparation/exams',
        parentKeys: ['preparation'],
      },
      {
        key: 'exams',
        path: '/preparation/exams',
        name: 'exams',
        access: 'canAdmin',
        parentKeys: ['preparation'],
        component: './Preparation/Exams',
      },
      {
        key: 'examtypes',
        path: '/preparation/exam-types',
        name: 'exam-types',
        access: 'canAdmin',
        parentKeys: ['preparation'],
        component: './Preparation/ExamTypes',
      },
    ],
  },
  {
    key: 'redirect',
    path: '/',
    redirect: '/dashboard',
  },
];

export default { studentRoutes, adminRoutes };

app.tsx

import * as allIcons from '@ant-design/icons';


function formatIcon(name: string) {
  return name.replace(name[0], name[0].toUpperCase()).replace(/-(w)/g, function (all, letter) {
    return letter.toUpperCase();
  });
}

// @ts-ignore
export function patchRoutes({ routes, routeComponents }) {
  if (cookie.checkTokenIfIsValid()) {
    const token = cookie.decodeAccessToken();
    const role = (token?.role as string) || (token?.trole as { role: string }).role;

    if (role && role === 'student') {
      window.dynamicRoutes = dynamicRoutes.studentRoutes;
    } else if (role && role === 'admin') {
      window.dynamicRoutes = dynamicRoutes.adminRoutes;
    }

    if (window.dynamicRoutes) {
      const parsedRoutes = parseRoutes(window.dynamicRoutes, routes);
      Object.assign(routes, parsedRoutes.routes); // 引用类型作为参数，直接操作原始对象，合并路由数据
      Object.assign(routeComponents, parsedRoutes.routeComponents); // 合并路由组件

      Object.keys(routes).forEach((key) => {
        const { icon } = routes[key];
        if (icon && typeof icon === 'string') {
          const upperIcon = formatIcon(icon);
          // @ts-ignore
          if (allIcons[upperIcon] || allIcons[upperIcon + 'Outlined']) {
            routes[key].icon = React.createElement(
              // @ts-ignore
              allIcons[upperIcon] || allIcons[upperIcon + 'Outlined'],
            );
          }
        }
      });
    }
  }
}

global typing.d.ts

import type { DynamicRoutes } from '@/utils/dynamicRoutes/typing';
import '@umijs/max/typings';

.....

declare global {
    interface Window {
      dynamicRoutes: DynamicRoutes.RouteRaw[];
    }
  }

[cdx111]

为什么要创建动态路由，用于什么场景？

[xXAvoraXx]

We keep all the pages and components in the system in the database, so we can dynamically manage the user's screens when necessary.

See.

https://openfga.dev/

[cdx111]

ah, I get it but whatever that you must define the components of everypage in frontend src

[xXAvoraXx]

You're talking about the routes.ts file, right? But it would be nice if the following code in the routes.ts file could change based on role.

  {
    path: '/',
    redirect: '/welcome',
  },

It's a little irritating that anyone who logs in is redirecting to the welcome page. I want the user logging in as admin to see the dashboard page, so the welcome page should not exist at all.

[xXAvoraXx]

normal users should be able to see the welcome page, I'm not talking about the 'access' property, the page and route should not be rendered.

[cdx111]

Logging in while using history.push(xxx) to a specific page based on the user's role if you want to go to the dashboard page but you need to early define the dashboard page in route.ts

[hyzx86]

在umi中 路由配置文件包含了 菜单配置，这也是把很多人搞懵逼的原因，
你要知道这个文件主要是配置了 路由
顺便配置了一下默认菜单而已，这对大多数 静态路由来说比较方便，因为菜单跟路由在一起
如果当你要实现动态路由 ，你可以配置一个或者几个通配符路由 ，就像下面这样
然后通过匹配的菜单路径 检查要给用户呈现的页面是哪个
react-router 会根据从上往下的顺序 进行自动匹配，如果上面的其他路由都不匹配，那么就会匹配 * 路由

在 以下示例 中 DynamicPage 组件 可以获取当前用户请求的路径，动态生成页面内容

config/routes.ts

[
...others,
  {
    //后台数据库中查找到的 AntdMenu 列表动态构建的树形路径
    locale: false,
    hideInMenu: true,
    name: 'dynamic_SubModulePage',
    path: '*',
    // path: '/:module/:subModule/:pageName',
    component: './DynamicPage',
  }] 

app.tsx

// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return { 
    logout: async (initialState) => {
      await authService.logout();
    }, 
    menu: {
      // defaultOpenAll: true,
      // hideMenuWhenCollapsed: true,
      // ignoreFlatMenu: true,
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?.name,
      },
      //Menu 只是 menu ，不要妄想操作 路由。 堆在这里不要动，留个纪念
      //动态Menu可以指定一个参数路由
      // 如何动态创建菜单？后台加载🧐[问题] #9920
      //https://github.com/ant-design/ant-design-pro/issues/9920
       request: async (params: any, defaultMenuData: MenuDataItem[]) => {
        if (window.__POWERED_BY_WUJIE__) {
          return defaultMenuData;
        }
        //console.log('monitor: menu.request initialState: ', initialState);
        if (initialState) {
          const serverSideMenudata = initialState?.settings?.menuData;
          if (serverSideMenudata) {
            return serverSideMenudata;
          } 
        } 
        return defaultMenuData;
      },
    },
....others
}

[xXAvoraXx]

文献资料不足有点令人困惑。我从你的陈述中了解到，系统内的路线应该是静态定义的，而菜单来自数据库更为准确。

但在这种情况下该如何操作呢？

• 根据用户的授权级别，"/"重定向页面可能会有所不同。
• 我们不使用基于角色的授权，因此路由定义中的 "access"功能对我们毫无用处。
• 我们希望防止用户通过猜测找到静态路由。分配给每个用户的路由信息来自数据库。这些路由信息不一定要显示在菜单中，有些路由可能不会显示在菜单中，但我们必须防止用户访问该路由。
• 所有这些都由 "Authorization Layer "决定。参见 -> openfga.dev

[hyzx86]

高度自定义还是用procomponet 的prolayut掌控性更好一些 如果已经基于antdpro 做的开发很容易实现迁移

…

---原始邮件--- 发件人: ***@***.***> 发送时间: 2023年10月18日(周三) 晚上10:10 收件人: ***@***.***>; 抄送: "Tony ***@***.******@***.***>; 主题: Re: [ant-design/ant-design-pro] [dynamicRoutes] 动态路由解决方案。 (Discussion #10898) 文献资料不足有点令人困惑。我从你的陈述中了解到，系统内的路线应该是静态定义的，而菜单来自数据库更为准确。 但在这种情况下该如何操作呢？ 根据用户的授权级别，"/"重定向页面可能会有所不同。 我们不使用基于角色的授权，因此路由定义中的 "access"功能对我们毫无用处。 我们希望防止用户通过猜测找到静态路由。分配给每个用户的路由信息来自数据库。这些路由信息不一定要显示在菜单中，有些路由可能不会显示在菜单中，但我们必须防止用户访问该路由。 所有这些都由 "Authorization Layer "决定。参见 -> openfga.dev — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[xXAvoraXx]

我使用 pro.ant.design 结构。

[hyzx86]

我的意思是 自建脚手架，不用 umi 的模板，也不用 umi，直接基于 vite 模板创建一个新的脚手架，一步步添加功能，然后用ProLayout
你会发现 这样的架构遇到问题更容易解决，不像umi ，遇到问题你得先读懂 umi 的源码或者配置结构

[xXAvoraXx]

目前，Umi 的 patchRoutes 功能可以解决这个问题。我目前正打算用 umijs 编写一个插件，是否可以将 patchRoutes 结构用作插件？

[hyzx86]

哈哈，继续吧，都是我躺过的坑

…

---原始邮件--- 发件人: ***@***.***> 发送时间: 2023年10月19日(周四) 凌晨4:34 收件人: ***@***.***>; 抄送: "Tony ***@***.******@***.***>; 主题: Re: [ant-design/ant-design-pro] [dynamicRoutes] 动态路由解决方案。 (Discussion #10898) 目前，Umi 的 patchRoutes 功能可以解决这个问题。我目前正打算用 umijs 编写一个插件，是否可以将 patchRoutes 结构用作插件？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[xXAvoraXx]

你必须在这些坑里进进出出，才能学到东西。但是，Umijs 建议使用 patchRoutes 来处理动态路由，我认为如果这是一个错误的解决方案，他们就不会把它添加到文档中。 在我给出的例子中，动态路由工作正常，只是有时在进入和退出时会出现 bug，我会解决这个问题。 出现 bug 的原因是 patchRoutes 在生命周期中只工作一次。路由基于 react-router-dom 库，patchRoutes 会在创建过程中介入并添加路由，我没有发现代码逻辑上有任何问题。

umijs patchroutes-route