ant design pro （十六）advanced 权限管理

一、概述

原文地址：https://pro.ant.design/docs/authority-management-cn

权限控制是中后台系统中常见的需求之一，你可以利用我们提供的权限控制组件，实现一些基本的权限控制功能，脚手架中也包含了几个简单示例以提供参考。

二、详细

2.1、权限组件 Authorized

这是脚手架权限管理的基础，基本思路是通过比对当前权限与准入权限，决定展示正常渲染内容还是异常内容，使用方式详见 Authorized 文档。

2.2、应用实例

通过对数据的组织及权限组件的应用，脚手架实现了基本的权限管理，下面简单介绍了几个常见场景的应用方式。

脚手架中对组件 export 的 RenderAuthorized 函数进行了基本封装，默认传入当前的权限(mock 数据)，因此在脚手架中使用时，无需再关注当前权限。

2.2.1、控制菜单显示

如需对某些菜单进行权限控制，只须对菜单配置文件 menu.js 中的菜单项设置 authority 属性即可，代表该项菜单的准入权限，菜单生成文件中会默认调用 Authorized.check 进行判断处理。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

{   name: '表单页',   icon: 'form',   path: 'form',   children: [{     name: '基础表单',     path: 'basic-form',   }, {     name: '分步表单',     path: 'step-form',   }, {     name: '高级表单',     authority: 'admin', // 配置准入权限     path: 'advanced-form',   }], }

2.2.2、控制路由导向

与菜单控制类似，路由权限的配置也很简单：

?

1 2 3 4 5 6 7 8 9 10 11

// src/common/router.js '/dashboard/analysis': {   component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')), }, '/dashboard/monitor': {   component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')), }, '/dashboard/workplace': {   component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')),   authority: 'admin', // 配置准入权限 },

注意：菜单中配置的权限会自动同步到对应路由中，如果 router.js 中有不同的配置，路由控制以 router.js 为准。

2.2.3、控制页面元素显示

使用 Authorized 或 Authorized.Secured 可以很方便地控制元素/组件的渲染，具体使用方式参见组件文档。

2.2.4、修改当前权限

脚手架中使用 localstorage 模拟权限角色，实际项目中可能需要从后台读取。
脚手架中实现了一个简单的刷新权限方法，在登录/注销等关键节点对当前权限进行了更新。
具体可以查看login.js中对 reloadAuthorized 的调用。