自动化- RBAC- 反应

如何使用

与 RBAC 环绕

• 会探测到 Business RABC 或者说 Employee RBAC 自动由 Auth SDK

import { RBACProvider } from '@aftership/automizely-rbac-react';

function App() {
  return (
    <div>
      <RBACProvider>
        <ComponentA />
        <ComponentB />
      </RBACProvider>
    </div>
  )
}

默认情况下, SDK 请求权限目录和所有产品赠款 with_catalog=true&with_all_products=true。这样可以保持 granted 准确时间 当前产品的许可树包含来自其他产品的许可.

额外的角色许可查询参数可以通过 requestOptions.query数字 :

<RBACProvider
  requestOptions={{
    query: {
      with_resource_apis: true,
    },
  }}
>
  <ComponentA />
</RBACProvider>

查询值支持字符串、数字和布尔值。 默认的 RBAC 查询 当不同的响应范围是 所需经费.

安保部

import { RolePermissions, RBACProvider } from '@aftership/automizely-rbac-react';
import { getServerSideProps as rbacGetServerSideProps } from '@aftership/automizely-rbac-react/server';

function getServerSideProps(ctx) {
  const initialData = rbacGetServerSideProps({
    realm: 'business',
    accountId: session.user.id,
    organizationId: organization?.id,
    productCode,
    query: {
      with_resource_apis: true,
    },
  }).catch((error) => {
    console.error('Error fetching rbac data:', error);
    return { role: { id: '', name: '' }, permissions: [] };
  })

  return {
    props: {
      initialData
    }
  }
}

function App({initialData}) {
  return (
    <div>
      <RBACProvider initialData={initialData}>
        <ComponentA />
        <ComponentB />
      </RBACProvider>
    </div>
  )
}

服务器助手接受相同的可选 query 对象为 RBACProvider.requestOptions.query,因此客户端和SSR请求可以使用 同样的角色许可范围.

遗产版本0.4.0

import { RBACProvider } from '@aftership/automizely-rbac-react';

function App() {
  const organizationId = '123456';

  return (
    <div>
      <RBACProvider
        orgId={organizationId}
        // for dev purpose
        // requestHeaders={{
        //   'am-account-id': user.account_id,
        //   'am-account-jwt-azp': 'aftership',
        // }}
      >
        <ComponentA />
        <ComponentB />
      </RBACProvider>
    </div>
  );
}

保护资源

import { Can, getPermissionTreePath, useRBACContext } from '@aftership/automizely-rbac-react';

function ComponentA() {
  const { ability, role } = useRBACContext();
  const hasPermission =
    ability.can('view', 'analytics/shipment') && ability.cannot('edit', 'notification');

  return hasPermission ? <div>role: {role.name}</div> : <div>some content that requires permissions</div>;
}

function ComponentB() {
  return (
    <div>
      <Can do="view" on="analytics/shipment">
        <div>some content that requires permissions</div>
      </Can>

      <Can not do="view" on="analytics/shipment">
        <div>some content that don't need requires permissions</div>
      </Can>

      <Can do="view" on="analytics/shipment" passThrough>
        {(allowed) => <button disabled={!allowed}>Save</button>}
      </Can>

      <Can do="edit" on="organization/domains" passThrough>
        {(allowed, ability, permission) => (
          <button disabled={!allowed} title={getPermissionTreePath(permission)}>
            Edit domains
          </button>
        )}
      </Can>
    </div>
  );
}

function ComponentC() {
  return (
    <div>
      <Can do="view" on="analytics/shipment" fallback={<div>fetching permission data...</div>}>
        <div>some content that requires permissions</div>
      </Can>
    </div>
  );
}