# @apideck/react-vault 中文文档

规范地址：https://npmcn.com/package/%40apideck/react-vault/

版本：0\.23\.1
npm 元数据更新时间：2026-09-17T09:21:07.517Z
中文译文更新时间：2026-11-06T10:01:18.078Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：5.2 MB，66 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：10 个
- peer 依赖：react \>=16，react-dom \>=16
- 首次发布：2022-02-17T09:32:38.925Z
- 最新版本发布：2026-09-17T09:21:07.314Z
- 近 30 天下载量：14967（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：139（近 12 个月 22 个）

## 中文简介



## 安装

```sh
npm install @apideck/react-vault
```

也可以使用：`pnpm add @apideck/react-vault`、`yarn add @apideck/react-vault`、`bun add @apideck/react-vault`

## README

# 默认核心

  

**我们建议使用新的 [@ apideck/ 自动反应](https://www.npmjs.com/package/@apideck/vault-react) 或者说 [@ apideck/vault-js (英语)](https://github.com/apideck-libraries/vault-js) 软件包.**

  

* * *

要嵌入的回放组件 [阿皮德克·沃尔](https://www.apideck.com/products/vault) 在任何反应应用程序中.

转到 [开发者文件](https://developers.apideck.com/guides/react-vault) 以向导.

![](https://user-images.githubusercontent.com/8850410/208065819-716c6e02-98c9-4df5-b687-e5acd1e3c4e5.png)

**反弹** | [联署材料](https://github.com/apideck-libraries/vault-js) | [阴道](https://github.com/apideck-libraries/vue-vault)

## 使用量

安装软件包

```sh
npm install @apideck/react-vault
```

创建一个 [默认会话](https://developers.apideck.com/apis/vault/reference#operation/sessionsCreate) 在您的应用程序中获取 JSON Web Token . 建议做这个服务器侧,所以你不会暴露你的API密钥.

与 `@apideck/node`数字 :

```sh
npm install @apideck/node
```

```js
import { Apideck } from '@apideck/node';

const apideck = new Apideck({
  apiKey: 'REPLACE_WITH_API_KEY',
  appId: 'REPLACE_WITH_APP_ID',
  consumerId: 'REPLACE_WITH_CONSUMER_ID',
});

const { data } = await apideck.vault.sessionsCreate({});

console.log('Token:', data.session_token);
```

将 JSON 的 Web Token 传递到 Vault 组件 :

```js
import { Vault } from '@apideck/react-vault';

const MyComponent = () => {
  return (
    <Vault
      token="REPLACE_WITH_SESSION_TOKEN"
      trigger={<button>Open Vault</button>}
    />
  );
};

export default MyComponent;
```

如果你没有使用 [尾风 CSS](https://tailwindcss.com/) 在您的项目中, 将样式包含在您的项目中 :

```js
import '@apideck/react-vault/dist/styles.css';
```

使用时 [尾风 CSS](https://tailwindcss.com/) 您应当将软件包路径包含在内容路径中 `tailwind.config.js`。 。 。 .

```js
// tailwind.config.js

module.exports = {
  content: ['./node_modules/@apideck/react-vault/**/*.js'],
  plugins: [require('@tailwindcss/forms')]
  ...
}
```

如果您想要将连接结果范围扩大到一个单一的统一 API,您可以通过给 `unifiedApi` 道具 (英语). 如果您想要打开 Vault 只为单个连接器, 您也应该提供 `serviceId`。 。 。 .

```js
import { Vault } from '@apideck/react-vault';

const MyComponent = () => {
  return (
    <Vault
      token="REPLACE_WITH_SESSION_TOKEN"
      unifiedApi="accounting"
      serviceId="quickbooks"
      trigger={<button>Open Vault</button>}
    />
  );
};

export default MyComponent;
```

如果您想要手动控制模式的打开和关闭,您可以提供 `open` 财务报告和审定财务报表 `onClose` 道具来.

```jsx
import { Button } from '@apideck/components';
import { Vault } from '@apideck/react-vault';
import { useState } from 'react';

const VaultButton = ({ token }) => {
  const [openVault, setOpenVault] = useState(false);

  const toggleVault = () => {
    setOpenVault(!openVault);
  };

  return (
    <div className="flex items-center space-x-3">
      <Button text="Open Vault" onClick={toggleVault} />
      <Vault token={token} open={openVault} onClose={toggleVault} />
    </div>
  );
};

export default VaultButton;
```

如果你想打开一个特定的视图,你可以通过 `initialView` 道具 (英语). 现有观点是: `settings`, (中文(简体) ), `configurable-resources`,以及 `custom-mapping`。 。 。 .

```js
import { Vault } from '@apideck/react-vault';

const MyComponent = () => {
  return (
    <Vault
      token="REPLACE_WITH_SESSION_TOKEN"
      unifiedApi="accounting"
      serviceId="quickbooks"
      initialView="custom-mapping"
      trigger={<button>Open Vault</button>}
    />
  );
};

export default MyComponent;
```

如果您想要在模式上方提供自定义标识, 您可以设置 `logo` 财产 `theme` 您可以通过会话提供. [查看 API 文档](https://developers.apideck.com/apis/vault/reference#operation/sessionsCreate)。 。 。 .

### 属性

| 财产 | 类型 | 需求 | 默认 | 说明 |
| --- | --- | --- | --- | --- |
| 符号 | 字符串 | 真实 | \- 说吧 | JSON 网络键从创建会话呼叫返回 |
| 触发 | 元素 | 虚假 | \- 说吧 | 点击时触发“ 默认” 模式的组件 |
| 显示归属 | 布尔 | 虚假 | 真实 | 在模式背景中显示“ Powered by Apideck” |
| 打开 | 布尔 | 虚假 | 虚假 | 设置切换到 `true` 打开地窖模式,并设置为 `false` 关闭虚拟模式 |
| 关闭 | () 无效 | 虚假 | \- 说吧 | 模式关闭时调用的函数 |
| 连接变化 | (连接: 连接) QQ 无效 | 虚假 | \- 说吧 | 当用户更新连接时被调用的函数 。 这可以是连接他们的账户,填写设置或添加新连接 |
| 连接删除 | (连接: 连接) QQ 无效 | 虚假 | \- 说吧 | 当用户删除连接时调用的函数 |
| 统一 Api | 字符串 | 虚假 | \- 说吧 | 当提供统一Api时,它将把连接结果范围扩大到该API. 如果还提供了服务 Id 打开单一连接 |
| 服务编号 | 字符串 | 虚假 | \- 说吧 | 当统一 Api 和服务Id 时, Vault 打开单一连接 |
| 显示消费者 | 布尔 | 虚假 | 虚假 | 显示创建会话时提供的消费者元数据 |
| 初始视图 | 连接视频 | 虚假 | \- 说吧 | 在连接会话的特定视图中打开默认值 |
| 语言 | 字符串 | 虚假 | 内 | 用特定语言打开默认值 |
| 显示语言交换符 | 布尔 | 虚假 | 虚假 | 在底部显示语言切换 |
| 显示按钮Layout | 布尔 | 虚假 | 虚假 | 在 TopBar 显示用于连接动作的按钮布局而不是下放菜单 |
| 自动启动认证 | 布尔 | 虚假 | 虚假 | 自动启动授权程序. 只在单一连接模式下应用 |

## 部署

用户 `np` (b) 向国家防范机制公布(需要2份表格)。 新版本发布后确保升级 `@apideck/react-vault` 软件包 `iframe-vault` 计划并部署.

## 常见问题

### 如何安装 @apideck/react-vault？

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

### @apideck/react-vault 支持 TypeScript 吗？

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

### @apideck/react-vault 支持 ESM 还是 CommonJS？

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

### @apideck/react-vault 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @apideck/react-vault 可以商用吗？

@apideck/react-vault 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @apideck/react-vault 的下载量有多少？

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

### @apideck/react-vault 还在维护吗？

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