antd-pro(V5)动态菜单

一般情况下登录系统后菜单是由后端返回的，不是前端写死的。antd-pro也支持，修改的路径在app.tsx

在 layout 里加一个menuDataRender字段先给一个() =>[]可以看到左侧菜单没了，说明配置生效了，接下来就可以围绕这个配置做文章了，我们先定义一个 menuDataRender方法。根据登录缓存到本地的数据做下处理，判断菜单里要展示哪些内容（比如替换字段，隐藏不显示的菜单，隐藏按钮等），处理好了后返回一个数组结构即可。

示例代码如下

export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
	...
    menuDataRender: () => menuDataRender(),
  	...
  };
};

const menuDataRender: any = () => {
  // 如果没有用户信息就展示空菜单
  const loginInfo = sessionStorage.getItem('loginInfo');
  if (!loginInfo) {
    return [];
  }
  const currentUser = JSON.parse(loginInfo || '{}');
  const { permissions } = currentUser.roleList[0];
  // 字段转换为要求字段
  let str = JSON.stringify(permissions);
  str = str.replace(/"permissionName":/g, '"name":');
  str = str.replace(/"permissionCode":/g, '"path":');
  str = str.replace(/"childPermissionList":/g, '"routes":');
  str = str.replace(/"isShow":false/g, '"hideInMenu":true');//不显示的菜单设置过滤
  const data = JSON.parse(str);
  data.forEach((item: any) => {
    spliceBtn(item);
  });
  return data;
};

// 判断是页面还是按钮
const spliceBtn = (obj: any) => {
  const item = obj;
  // 先获取所有的权限
  if (item.routes instanceof Array && item.routes.length > 0) {
    item.routes.forEach((item2: any) => {
      spliceBtn(item2);
    });
    //这里是判断该节点是页面还是按钮 需要根据项目的具体的情况来判断（比如后端直接给你指定了是按钮还是页面）
    const result = item.routes.every((item2: any) => {
      return Array.prototype.isPrototypeOf(item2.routes) && item2.routes.length === 0;
    });
    item.path = `/${item.path}`;
    if (result) {
      item.hideChildrenInMenu = true; //如果下层全是按钮就不隐藏子元素
    }
  }
};