权限管理

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

权限组件 Authorized

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

应用实例

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

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

控制菜单和路由显示

如需对某些页面进行权限控制，只须在路由配置文件 router.config.js 中设置 Routes 属性即可，代表该路由的准入权限，pro 的路由系统中会默认包裹 Authorized 进行判断处理。

  1. {
  2.   path: '/',
  3.   component: '../layouts/BasicLayout',
  4.   Routes: ['src/pages/Authorized'],
  5.   authority: ['admin', 'user'],
  6.   routes: [
  7.     // forms
  8.     {
  9.       path: '/form',
  10.       icon: 'form',
  11.       name: 'form',
  12.       routes: [
  13.         {
  14.           path: '/form/basic-form',
  15.           name: 'basicform',
  16.           component: './Forms/BasicForm',
  17.         },
  18.         {
  19.           path: '/form/advanced-form',
  20.           name: 'advancedform',
  21.           authority: ['admin'],//配置准入权限,可以配置多个角色
  22.           component: './Forms/AdvancedForm',
  23.         },
  24.       ],
  25.     },
  26.   ],
  27. }

控制页面元素显示

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

修改当前权限

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

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

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

如何控制页面访问权限（用户角色）

只需在 models/menu 中获取 routerData ，这里的获取方式有几种，像 pro 现在这样从 config 中传值，也可以通过 http 请求从服务端获取，甚至本地的 json 文件加载也可以。routerData 是一个 json 数组。获取之后只需返回类似格式的 json 即可。

  1. routerData: {
  2.   routes: [
  3.     // dashboard
  4.     {
  5.       path: '/dashboard',
  6.       authority: ['admin'],
  7.       routes: [
  8.         {
  9.           path: '/dashboard/analysis',
  10.           authority: ['admin','user'],
  11.         },
  12.       ],
  13.     },
  14.   ]
  15. }

注意 routerData 和 menuData 可以使用同一个数据，也可以使用不同的数据，注意他们的必要属性即可。

如何从服务器动态追加页面权限

这里使用 umi 的运行时配置文件 src/app ，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。

  1. export function render(oldRender) {
  2.   if (defaultSettings.runtimeMenu) {
  3.     fetch('/api/auth_routes')
  4.       .then(res => res.json())
  5.       .then(ret => {
  6.         authRoutes = ret;
  7.         oldRender();
  8.       });
  9.   } else {
  10.     oldRender();
  11.   }
  12. }

然后在 patchRoutes 方法中，根据 authRoutes 追加路由配置即可。

  1. export function patchRoutes(routes) {
  2.   if (defaultSettings.runtimeMenu) {
  3.     const routesRender = renderRoutes(authRoutes); // 方法自写
  4.     routes.length = 0; // eslint-disable-line
  5.     Object.assign(routes, routesRender);
  6.   }
  7. }

注意：这里并无法动态加载页面文件，所有 path 必须要在 routre.config.js 中定义。（约定式路由不需要，只需页面真实有效即可）。