@umijs/plugin-access

@umijs/plugin-access

启用方式

有 src/access.ts 时启用。

介绍

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

// src/access.ts
export default function(initialState) {
  const { userId, role } = initialState;
  return {
    canReadFoo: true,
    canUpdateFoo: role === 'admin',
    canDeleteFoo: foo => {
      return foo.ownerId === userId;
    },
  };
}

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

配置

扩展的路由配置

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

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

access

Type: string

对应的权限名称。

API

useAccess

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

import React from 'react';
import { useAccess } from 'umi';
const PageA = props => {
  const { foo } = props;
  const access = useAccess();
  if (access.canReadFoo) {
    // 如果可以读取 Foo，则...
  }
  return <>TODO</>;
};
export default PageA;

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

Access

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

accessible

Type: boolean

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

fallback

Type: React.ReactNode

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

children

Type: React.ReactNode

有权限时的显示。

完整示例如下：

import React from 'react';
import { useAccess, Access } from 'umi';
const PageA = props => {
  const { foo } = props;
  const access = useAccess(); // access 的成员: canReadFoo, canUpdateFoo, canDeleteFoo
  if (access.canReadFoo) {
    // 如果可以读取 Foo，则...
  }
  return (
    <div>
      <Access
        accessible={access.canReadFoo}
        fallback={<div>Can not read foo content.</div>}
      >
        Foo content.
      </Access>
      <Access
        accessible={access.canUpdateFoo}
        fallback={<div>Can not update foo.</div>}
      >
        Update foo.
      </Access>
      <Access
        accessible={access.canDeleteFoo(foo)}
        fallback={<div>Can not delete foo.</div>}
      >
        Delete foo.
      </Access>
    </div>
  );
};

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

@umijs-plugin-access