[JavaScript知识库]React AntdPro的动态路由鉴权

使用版本：antd pro v4（v5思路也是这个，本来先做v5的路由鉴权再做v4的，只是v4做的更好，就拿上来了讲了）
场景：菜单是从后台来的，后台可根据角色返回各自的菜单，但前端通过url还是能进无权限的页面，所以前端需要做路由控制
思路：匹配当前路径的路由，无就是没页面权限；有则它底下带的子路由，就是页面里的按钮权限

// 使用这个有个前提， /a/b/c需要每一级都有对应菜单，否则从/重定向到/a/b/c的途中会因没权限而挂掉
const findCurrentMenu = (menus: MenuDataItem[], pathname: string): MenuDataItem | undefined => {
  for (let idx = 0; idx < menus.length; idx += 1) {
    const menu = menus[idx];
    // 正则贪婪匹配 这一段花了好多力气
    const reg =
      menu.path && new RegExp(`^${menu.path.replace(/\//g, '\\/').replace(/\*/g, '[\\d\\w-]*')}$`);
    // 匹配 => 返回
    if (reg && reg.test(pathname)) {
      return menu;
    }
    // 有routes或children => 递归返回
    if (menu.routes?.length || menu.children?.length) {
      const name = menu.routes?.length ? 'routes' : 'children';
      const tmp = findCurrentMenu(menu[name], pathname);
      if (tmp) {
        return tmp;
      }
    }
  }
  return undefined;
};