react 路由和菜单的权限控制(antd-pro)
machao07 opened this issue · comments
开发环境
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']
};
}