AntDesign Pro 根据用户的角色对菜单实现权限管理

1.在routes.ts中添加菜单

{
    path: '/user', 
    name: '用户管理', 
    icon: 'user',
    hideChildrenInMenu: false,
    routes: 
    [
      {
        path: '/user/showUsers', 
        name: '用户列表', 
        component: './User/Manage'
      },
    ]
},

此时所有的用户登录展现的菜单效果都是这样的                        

接下来我们加入角色限制，

{
   path: '/user', 
   name: '用户管理', 
   icon: 'user',
   hideChildrenInMenu: false,
   routes: 
   [
      {
        path: '/user/showUsers', 
        name: '用户列表', 
        component: './User/Manage',
        access: 'canRoot' //此处限定为需要管理员角色才可见此菜单
      },
   ]
},

在src目录下的access.ts进行修改

export default function access(initialState: { currentUser?: API.LoginUserVO } | undefined) {
  const { currentUser } = initialState ?? {};
  return {
    canRoot: currentUser && currentUser.userRole === 'root' ? true : false,//返回true 展示
  };
}

管理员角色登录菜单效果：

普通用户角色登录菜单效果：