Home
Guide
API
Develop
Plugins
Roadmap
Contribution
Home
Guide
API
Develop
Plugins
Roadmap
Contribution

权限控制

介绍

Tachybase 的 ACL 模块主要由两部分组成：

  • 内核中的 @tachybase/acl，提供核心功能
  • 插件中的 @tachybase/plugin-acl，提供动态配置能力

安装

内置插件，无需单独安装。

开发指南

扩展一个新的权限配置栏

下面以“移动端菜单”配置项为例，演示如何扩展一个新的权限配置栏。效果如下图所示：

代码如下：

1import { Plugin } from '@tachybase/client';
2import PluginACLClient from '@tachybase/plugin-acl/client';
3
4class PluginMobileClient extends Plugin {
5  async load() {
6    const aclInstance = this.app.pm.get(PluginACLClient);
7
8    aclInstance?.settingsUI.addPermissionsTab(({ t, TabLayout, activeKey }) => ({
9      key: 'mobile-menu',
10      label: t('Mobile menu', {
11        ns: 'plugin-mobile',
12      }),
13      children: (
14        <TabLayout>
15          <MenuPermissions />
16        </TabLayout>
17      ),
18    }));
19  }
20}

首先，我们需要获取到 PluginACLClient 插件的实例，通过 settingsUI.addPermissionsTab 方法添加一个新的权限配置栏。在这个例子中，我们添加了一个名为“移动端菜单”的权限配置栏。

settingsUI 属性的值是一个名为 ACLSettingsUI 的类的实例，其类型信息如下：

1import { TabsProps } from 'antd/es/tabs/index';
2
3interface ACLSettingsUI {
4  addPermissionsTab(tab: Tab | TabCallback): void;
5  getPermissionsTabs(props: PermissionsTabsProps): Tab[];
6}
7
8type Tab = TabsProps['items'][0];
9
10type TabCallback = (props: PermissionsTabsProps) => Tab;
11
12interface PermissionsTabsProps {
13  /**
14   * the key of the currently active tab panel
15   */
16  activeKey: string;
17  /**
18   * the currently selected role
19   */
20  role: Role;
21  /**
22   * translation function
23   */
24  t: TFunction;
25  /**
26   * used to constrain the size of the container in the Tab
27   */
28  TabLayout: React.FC;
29}
ON THIS Page