# @aftership/automizely-rbac-react 中文文档

规范地址：https://npmcn.com/package/%40aftership/automizely-rbac-react/

版本：1\.0\.0
npm 元数据更新时间：2026-09-03T09:54:46.369Z
中文译文更新时间：2026-11-05T21:59:22.134Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aftership/automizely-rbac-react
原文对照：https://npmcn.com/package/%40aftership/automizely-rbac-react/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：204 kB，62 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=17，react-dom \>=17，@aftership/automizely-product-auth \>=2
- 首次发布：2022-02-14T09:20:36.826Z
- 最新版本发布：2026-09-03T09:54:46.209Z
- 近 30 天下载量：14455（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：28（近 12 个月 7 个）

## 中文简介

## 如何使用

## 安装

```sh
npm install @aftership/automizely-rbac-react
```

也可以使用：`pnpm add @aftership/automizely-rbac-react`、`yarn add @aftership/automizely-rbac-react`、`bun add @aftership/automizely-rbac-react`

## README

# 自动化- RBAC- 反应

## 如何使用

### 与 RBAC 环绕

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

```javascript
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`数字 :

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

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

### 安保部

```javascript

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

```javascript
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>
  );
}
```

### 保护资源

```javascript
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>
  );
}
```

## 常见问题

### @aftership/automizely-rbac-react 是什么？

如何使用

### 如何安装 @aftership/automizely-rbac-react？

在项目目录运行 npm install @aftership/automizely-rbac-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=17）、react-dom（\>=17）、@aftership/automizely-product-auth（\>=2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aftership/automizely-rbac-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aftership/automizely-rbac-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @aftership/automizely-rbac-react 可以商用吗？

@aftership/automizely-rbac-react 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @aftership/automizely-rbac-react 的下载量有多少？

根据 npm 官方下载统计，@aftership/automizely-rbac-react 在 2026/10/05 – 2026/11/03 这 30 天内被下载 14,455 次，日均约 482 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aftership/automizely-rbac-react 还在维护吗？

最新版本 1\.0\.0 发布于 2026/09/03（2 个月前）；至今共发布 28 个版本，其中过去 12 个月发布了 7 个；首次发布于 2022/02/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。