umi＋react＋antdesign pro 实现动态路由和动态菜单（权限管理）

下面是两种方式：

1、动态菜单+固定路由

2、动态菜单+动态路由

两者都可以实现需要，但都各自有优缺点

主要代码：

在app.tsx中设置和请求服务器菜单数据

注意点：

       1、服务器返回的数据尽可能可前端所需要的数据保持一致，且结构一致。

        2、下列请求服务器动态菜单数据，可以在初始化数据时保存到用户信息里。如下方的initialState.currentUser。在这可以直接读取，但是有一个问题  当用户改变时，不能即使返回最新的菜单数据。浏览器有缓存，需要刷新后方可显示（不可取）。

// https://umijs.org/zh-CN/plugins/plugin-layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?.userid,
      },
      request: async (params, defaultMenuData) => {
        // initialState.currentUser 中包含了所有用户信息
        const menuData = await fetchMenuData();
        return menuData;
      },
    },
  };
};

固定路由

依旧要设置routes.tsx

这里说明一下：antd  pro  官方是设置动态菜单  设置不了动态路由的。所以路由还是要保证全部存在。

但是这种情况会有一个问题。从地址栏输入地址  可以进入菜单栏中没有的页面（bug）。

解决方法，在切换路由时，会在app.tsx种触发函数onPageChange:()=>{}

在这，你可以拿取跳转的当前路由和你获取的动态菜单做匹配，若从在。可跳转。不存在，跳转到404

动态路由如何做

1、想要做动态路由，可以通过服务器获取动态菜单的数据来做。

2、但是所需要的数据就很多了，例如当前菜单是否隐藏，侧边栏不显示等等这些属性。所以，如果后端写死，需要让后端返回很多数据；如果有开发人员配置菜单规则。需要添加这边字段。注意：有些字段会使项目有意想不到的bug产生，需要对返回的数据做一些过滤。

3、动态菜单通过对数据操作，可形成动态路由。（这个方法，相当可以）

// 一：通常远程请求到的菜单数据menuData
export const routes: Route[] = [
  {
    path: '/',
    component: '@/layouts/index',
    routes: [
      {
        path: '/',
        exact: true,
        component: '@/pages/index',
      },
      // 其他路由配置
    ],
    layout: {
      // 定义布局配置
      menu: true, // 开启菜单
    },
  },
];
// 二：自定义路由菜单
export const routes: Route[] = [
  {
    path: '/',
    component: '@/layouts/index',
    routes: [
      {
        path: '/',
        exact: true,
        component: '@/pages/index',
      },
      // 其他路由配置
    ],
    layout: {
      // 定义布局配置
      menuData: [
        {
          name: '首页',
          path: '/',
          icon: 'home',
        },
        {
          name: '用户管理',
          path: '/users',
          icon: 'user',
          children: [
            {
              name: '用户列表',
              path: '/users/list',
            },
            {
              name: '新增用户',
              path: '/users/add',
            },
          ],
        },
        // 其他菜单配置
      ],
    },
  },
];

在这说一下涉及到的权限管理  也和这边有关联

权限一般分为 

        页面权限和按钮权限（这是对于前端来说，后端需要配置接口权限）

页面权限就可以通过不同的角色来给他配置和显示不同的菜单（页面权限）

按钮权限可以通过每一个页面权限的子集，来获取某些个字段，通过这些字段的鉴别，来对应的显示/隐藏不同的按钮（按钮权限）

以上只是思路、具体参考资料

ant design pro v5 - 03 动态菜单 动态路由（配置路由 动态登录路由 登录菜单）-CSDN博客

Umi4 从零开始实现动态路由、动态菜单_umi 动态路由_绿胡子大叔的博客-CSDN博客

Umi从服务端动态获取路由_umi获取当前路由地址_魔仙女王的魔法杖的博客-CSDN博客

🧐 ant-design-pro v4.5 可能是全网最简洁的实现动态路由和动态菜单解决方案 · Issue #8121 · ant-design/ant-design-pro · GitHub