一、概述

原文地址：

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

二、详细

2.1、权限组件 Authorized

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

2.2、应用实例

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

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

2.2.1、控制菜单显示

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

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

2.2.2、控制路由导向

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

// 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、控制页面元素显示

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

2.2.4、修改当前权限

脚手架中使用 localstorage 模拟权限角色，实际项目中可能需要从后台读取。

脚手架中实现了一个简单的刷新权限方法，在登录/注销等关键节点对当前权限进行了更新。

具体可以查看login.js中对的调用。