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

权限组件 Authorized

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

应用实例

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

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

控制菜单显示

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

  1. {
  2.   name: '表单页',
  3.   icon: 'form',
  4.   path: 'form',
  5.   children: [{
  6.     name: '基础表单',
  7.     path: 'basic-form',
  8.   }, {
  9.     name: '分步表单',
  10.     path: 'step-form',
  11.   }, {
  12.     name: '高级表单',
  13.     authority: 'admin', // 配置准入权限
  14.     path: 'advanced-form',
  15.   }],
  16. }

控制路由导向

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

  1. // src/common/router.js
  2. '/dashboard/analysis': {
  3.   component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
  4. },
  5. '/dashboard/monitor': {
  6.   component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')),
  7. },
  8. '/dashboard/workplace': {
  9.   component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')),
  10.   authority: 'admin', // 配置准入权限
  11. },

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

控制页面元素显示

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

修改当前权限

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