权限管理

上次修改时间：2021-07-02 10:46:73

应用实例

如果你使用了 umi@3，推荐使用 plugin-access，pro 会稍后迁移到这个插件。

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

应用实例

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

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

控制菜单和路由显示

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

{
  path: '/',
  component: '../layouts/BasicLayout',
  Routes: ['src/pages/Authorized'],
  authority: ['admin', 'user'],
  routes: [
    // forms
    {
      path: '/form',
      icon: 'form',
      name: 'form',
      routes: [
        {
          path: '/form/basic-form',
          name: 'basicform',
          component: './Forms/BasicForm',
        },
        {
          path: '/form/advanced-form',
          name: 'advancedform',
          authority: ['admin'],//配置准入权限,可以配置多个角色
          component: './Forms/AdvancedForm',
        },
      ],
    },
  ],
}

修改当前权限

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

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

具体可以查看 Authorized.ts 中 reloadAuthorized 的定义。

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

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

router: {
  routes: [
    // dashboard
    {
      path: '/dashboard',
      authority: ['admin'],
      routes: [
        {
          path: '/dashboard/analysis',
          authority: ['admin', 'user'],
        },
      ],
    },
  ];
}

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