ant design pro 前端权限管理，显示不同的菜单

配置其实很简单，奈何 Ant Design Pro 文档写的有点晦涩，且代码不是最新的 Ant Design Pro 5。

整理了一下。

真实场景是，总部管理员与代理商登录后台看到的功能模块不一样，即左侧菜单显示不同。

需要修改三个地方：

src/access.ts

return 中添加各种权限配置。

currentUser 为调用后台的用户信息查询接口。

export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) {
  const { currentUser } = initialState || {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin',
    canAgent: currentUser && currentUser.access === 'agent',
  };
}

currentUser api

返回的数据中包含 access 字段：

{
	access: "agent"
	avatar: "some.png"
	name: "大象笔记"
}

config/routes.ts

Ant Design Pro 路由配置，需要权限控制的增加一个 access 字段。

值对应 access.ts 里 return 的一个 key:

{
  name: '积分兑换订单',
  icon: 'FileDoneOutlined',
  path: '/orders',
  component: './Orders',
  access: 'canAdmin',
},

参考

https://beta-pro.ant.design/docs/authority-management-cn

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式