@8base-react/permissions-provider 中文文档教程

Question

8base Table Schema Provider

Table Schema Provider 获取 8base 表模式的列表，并通过 React Context 提供它。

API

Table of Contents

• PermissionsProvider
  • Properties

PermissionsProvider

扩展 React.Component

Provider 以获得 8base 用户权限

Properties

• children Function Children of the provider. Could be either react node or function with loading state.

Usage

Programatic usage

import React from 'react';
import { PermissionsProvider, PermissionContext, isAllowed } from '@8base/permission-provider';

class MyComponent extends React.Component {
  static contextType = PermissionContext;

  render() {
    const allowed = isAllowed({
      resource: 'schema',
      type: 'custom',
      permission: 'edit'
    }, this.context);

    return <Button disabled={!allowed}>Edit Schema!</Button>
  }
}

const Application = () => (
  <PermissionsProvider>
    {
      ({ loading }) => loading ? 'Loading...' : (
        <MyComponent />
      )
    }
  </PermissionsProvider>
);

Conditional rendering by schema permission

import React from 'react';
import { PermissionsProvider, IfAllowed } from '@8base/permission-provider';

const MyComponent = () => (
  <IfAllowed permissions={[['custom', 'schema', 'edit']]}>
    <Button>Edit Schema!</Button>
  </IfAllowed>
);

const Application = () => (
  <PermissionsProvider>
    {
      ({ loading }) => loading ? 'Loading...' : (
        <MyComponent />
      )
    }
  </PermissionsProvider>
);

Conditional rendering by data permission

import React from 'react';
import { IfAllowed } from '@8base/permission-provider';

const MyComponent = () => (
  <IfAllowed permissions={[['data', 'Clients', 'create']]}>
    <Button>Create Client!</Button>
  </IfAllowed>
);

const Application = () => (
  <PermissionsProvider>
    {
      ({ loading }) => loading ? 'Loading...' : (
        <MyComponent />
      )
    }
  </PermissionsProvider>
);

Usage with render props

import React from 'react';
import { IfAllowed } from '@8base/permission-provider';

const MyComponent = () => (
  <IfAllowed permissions={[['custom', 'schema', 'edit']]}>
    {
      (allowed) => <Button disabled={!allowed}>Edit Schema!</Button>
    }
  </IfAllowed>
);

const Application = () => (
  <PermissionsProvider>
    {
      ({ loading }) => loading ? 'Loading...' : (
        <MyComponent />
      )
    }
  </PermissionsProvider>
);