使用React Router实现前端的权限访问控制

前段时间学习了React Router，发现没有Vue里面的路由功能强大，没有直接提供路由中间件，不能像Vue里面一样在路由配置上设置任意的额外属性，但是可以通过一些技巧来实现这些功能。

export type MenuConfig = {
   
  computedMatch?: match<any>;
  route?: MenuDataItem
  location: {
   
    pathname?: string;
  };
}

export type MenuDataItem = {
   
  /** @name 子菜单 */
  children?: MenuDataItem[];
  routes?: MenuDataItem[];
  /** @name 在菜单中隐藏子节点 */
  hideChildrenInMenu?: boolean;
  /** @name 在菜单中隐藏自己和子节点 */
  hideInMenu?: boolean;
  /** @name 菜单的icon */
  icon?: React.ReactNode;
  /** @name 自定义菜单的国际化 key */
  locale?: string | false;
  /** @name 菜单的名字 */
  name?: string;
  /** @name 用于标定选中的值，默认是 path */
  key?: string;
  /** @name disable 菜单选项 */
  disabled?: boolean;
  /** @name disable menu 的 tooltip 菜单选项 */
  disabledTooltip?: boolean;
  /** @name 路径,可以设定为网页链接 */
  path?: string;
  /**
   * 当此节点被选中的时候也会选中 parentKeys 的节点
   *
   * @name 自定义父节点
   */
  parentKeys?: string[];
  /** @name 隐藏自己，并且将子节点提升到与自己平级 */
  flatMenu?: boolean;
  /** @name 指定外链打开形式，同a标签 */
  target?: string;
  /**
   * menuItem 的 tooltip 显示的路径
   */
  tooltip?: string;
  /**
   * 组件
   */
  component?: Promise<{
    default: React.ComponentType<any> }>;
  /**
   * 权限码
   */
  access?: string;

}

const menuConfig: MenuConfig = {
   
  route: {
   
    path: '/',
    routes: [
      {
   
        key: '1',
        name: '首页',
        path: '/home',
        icon: <HomeFilled />,
        component: import('@/pages/home')
      },
      {
   
        name: '系统管理',
        path: '/system',
        access: 'system:view',
        icon: <SettingFilled />,
        routes: [
          {
   
            name: '用户管理',
            path: '/system/user',
            icon: <ContactsFilled />,
            access: 'user:view',
            component: import('@/pages/system/user')
          },
          {
   
            name: '角色管理',
            path: '/system/role',
            icon: <SmileFilled />,
            access: 'role:view',
            component: import('@/pages/system/role')
          },
          {
   
            name: '权限管理',
            path: '/system/authority',
            access: 'ahthority:view',
            routes: [
              {
   
                name: '菜单按钮管理',
                path: '/system/authority/menu',
                icon: <GoldenFilled