react 路由和菜单的权限控制（antd-pro)

[马超]

开发环境

• umijs 3.5.0
• react 17.0.0
• antd 4.10.0
• antd-pro

1、login

const roleList = JSON.stringify(res.data?.roleList || []);
localStorage.setItem('roleList', roleList);

2、access.ts

/**
 * @see https://umijs.org/zh-CN/plugins/plugin-access
 * */
export default function access() {
  let routes: string | any[] = [];
  const roleList = JSON.parse(localStorage.getItem('roleList') || '[]');
  if (roleList.includes('ADMIN')) {
    routes = ['发票管理', '交易管理', '协议管理'];
  } else {
    if (roleList.includes('INVOICE_MANAGER')) {
      routes.push('发票管理');
    }
    if (roleList.includes('SIGNATORY')) {
      routes.push('协议管理');
    }
    if (roleList.includes('TRANS_MANAGER')) {
      routes.push('交易管理');
    }
  }

  return {
    adminRouteFilter: () => false, // 只有管理员可访问
    normalRouteFilter: (route: any) => routes.includes(route.name), // 中包含了的路由才有权限访问
  };
}

console.log(route)

3、routes.ts

• access 添加 normalRouteFilter

const routes = [
  {
    path: '/user',
    layout: false,
    routes: [
      {
        path: '/user/login',
        layout: false,
        name: 'login',
        component: './user/Login',
      },
      {
        path: '/user',
        redirect: '/user/login',
      },
      {
        name: 'register',
        icon: 'smile',
        path: '/user/register',
        component: './user/register',
      }
    ],
  },
  {
    path: '/transactionManage',
    name: '交易管理',
    icon: 'transaction',
    access: 'normalRouteFilter',
    routes: [
      {
        path: '/transactionManage',
        redirect: '/transactionManage/payment',
      },
      {
        name: '付款管理',
        path: '/transactionManage/payment',
        component: './TransactionManage/payment',
      },
      {
        name: '收款管理',
        path: '/transactionManage/receipt',
        component: './TransactionManage/receipt',
      },
    ],
  },
  {
    path: '/invoiceManage',
    name: '发票管理',
    icon: 'schedule',
    access: 'normalRouteFilter',
    routes: [
      {
        path: '/invoiceManage',
        redirect: '/invoiceManage/bill',
      },
      {
        name: '账单列表',
        path: '/invoiceManage/bill',
        component: './InvoiceManage/billList',
      },
      {
        // name: '订单列表',
        path: '/invoiceManage/order',
        component: './InvoiceManage/orderList',
      },
    ],
  },
  {
    path: '/protocolManage',
    name: '协议管理',
    icon: 'form',
    access: 'normalRouteFilter',
    routes: [
      {
        path: '/protocolManage',
        redirect: '/protocolManage/scene',
      },
      {
        name: '场景签约关系',
        path: '/protocolManage/scene',
        component: './ProtocolManage/scene',
      },
      {
        // name: '协议列表',
        path: '/protocolManage/list',
        component: './ProtocolManage/list',
      },
    ],
  },
  {
    path: '/',
    redirect: '/transactionManage/payment',
  },
  {
    component: '404',
  },
];

export default routes;

4、login登录重定向

• reload() 重新调用 access 渲染 routes
• setTimeout 避免闪现（先进入才重载）

const roleLists = res.data?.roleList || [];
window.location.reload();
if (roleLists.includes('INVOICE_MANAGER')) {
    setTimeout(() => {
        history.push('/invoiceManage');
    }, 1000);
} else if (roleLists.includes('SIGNATORY')) {
    setTimeout(() => {
        history.push('/protocolManage');
    }, 1000);
} else {
    setTimeout(() => {
        history.push('/');
    }, 1000);
}

第二种

export default function access() {
    const menuListInit = JSON.parse(localStorage.getItem('scpp-menuList') || '[]');
    const menuList = Object.create(null)
    menuListInit.map((item: any) => menuList[item] = item)

    return {
        normal: true,
        orgMange: (route: any) => route.menuId === menuList['org:manage'],
        orgList: (route: any) => route.menuId === menuList['org:manage:all'],
        enterpriseManage: (route: any) => route.menuId === menuList['enterprise:manage'],
        enterpriseList: (route: any) => route.menuId === menuList['enterprise:manage:all'],
        userManage: (route: any) => route.menuId === menuList['user:manage'],
        userList: (route: any) => route.menuId === menuList['user:manage:all'],
        roleList: (route: any) => route.menuId === menuList['role:manage:all']
    };
}