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

更新日期: 2021-07-22 阅读次数: 128 字数: 233 分类: ReactJS

配置其实很简单,奈何 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

tags: Ant Design Pro

爱评论不评论