@umijs/plugin-access

启用方式

src/access.ts 时启用。

介绍

我们约定了 src/access.ts 为我们的权限定义文件,该文件需要默认导出一个方法,导出的方法会在项目初始化时被执行。该方法需要返回一个对象,对象的每一个值就对应定义了一条权限。如下所示:

  1. // src/access.ts
  2. export default function(initialState) {
  3. const { userId, role } = initialState;
  4. return {
  5. canReadFoo: true,
  6. canUpdateFoo: role === 'admin',
  7. canDeleteFoo: foo => {
  8. return foo.ownerId === userId;
  9. },
  10. };
  11. }

其中 initialState 是通过初始化状态插件 @umijs/plugin-initial-state 提供的数据,你可以使用该数据来初始化你的用户权限。

配置

扩展的路由配置

配合 Layout 插件你可以很简单是实现针对某些页码的权限控制。如下所示,只有拥有了 canReadPageA (在 src/access.ts 中定义)权限,用户才可以访问该页面。否则会默认渲染 Layout 插件内置的权限错误页面。

  1. // config/route.ts
  2. export const routes = [
  3. {
  4. path: '/pageA',
  5. component: 'PageA',
  6. access: 'canReadPageA', // 权限定义返回值的某个 key
  7. }
  8. ]

access

  • Type: string

对应的权限名称。

API

useAccess

我们提供了一个 Hooks 用于在组件中获取权限相关信息,如下所示:

  1. import React from 'react';
  2. import { useAccess } from 'umi';
  3. const PageA = props => {
  4. const { foo } = props;
  5. const access = useAccess();
  6. if (access.canReadFoo) {
  7. // 如果可以读取 Foo,则...
  8. }
  9. return <>TODO</>;
  10. };
  11. export default PageA;

配合 Access 组件可以很好简单的实现页面内的元素的权限控制。

Access

可以在业务组件中使用插件提供的 React hook useAccess 以及组件 <Access /> 对应用进行权限控制了。组件 Access 支持的属性如下:

accessible

  • Type: boolean

是否有权限,通常通过 useAccess 获取后传入进来。

fallback

  • Type: React.ReactNode

无权限时的显示,默认无权限不显示任何内容。

children

  • Type: React.ReactNode

有权限时的显示。

完整示例如下:

  1. import React from 'react';
  2. import { useAccess, Access } from 'umi';
  3. const PageA = props => {
  4. const { foo } = props;
  5. const access = useAccess(); // access 的成员: canReadFoo, canUpdateFoo, canDeleteFoo
  6. if (access.canReadFoo) {
  7. // 如果可以读取 Foo,则...
  8. }
  9. return (
  10. <div>
  11. <Access
  12. accessible={access.canReadFoo}
  13. fallback={<div>Can not read foo content.</div>}
  14. >
  15. Foo content.
  16. </Access>
  17. <Access
  18. accessible={access.canUpdateFoo}
  19. fallback={<div>Can not update foo.</div>}
  20. >
  21. Update foo.
  22. </Access>
  23. <Access
  24. accessible={access.canDeleteFoo(foo)}
  25. fallback={<div>Can not delete foo.</div>}
  26. >
  27. Delete foo.
  28. </Access>
  29. </div>
  30. );
  31. };

useAccess() 的返回值 access 就是第三步中定义的权限集合,可以利用它进行组件内代码执行流的控制。 <Access> 组件拥有 accessiblefallback 两个属性,当 accessibletrue 时会渲染子组件,当 accessiblefalse 会渲染 fallback 属性对应的 ReactNode