# 如何从插件创建管理员权限

> Source: https://strapi.nodejs.cn/cms/plugins-development/guides/admin-permissions-for-plugins

🌐 How to create admin permissions from plugins

<Tldr>

插件可以使用 `strapi.admin.services.permission.actionProvider.registerMany()` 在服务器端注册管理员权限，然后使用 `<Page.Protect>` 保护页面、菜单链接和组件，使用 `useRBAC` 钩子来执行基于角色的访问控制。

🌐 Plugins can register admin permissions server-side using `strapi.admin.services.permission.actionProvider.registerMany()`, then protect pages with `<Page.Protect>`, menu links, and components using the `useRBAC` hook to enforce role-based access control.

在[开发 Strapi 插件](/cms/plugins-development/developing-plugins)时，你可能希望为你的插件创建管理员权限。通过这样做，你可以接入 Strapi 的[RBAC 系统](/cms/features/rbac)，有选择地为插件的某些部分授予权限。

🌐 When [developing a Strapi plugin](/cms/plugins-development/developing-plugins), you might want to create admin permissions for your plugin. By doing that you can hook in to the [RBAC system](/cms/features/rbac) of Strapi to selectively grant permissions to certain pieces of your plugin.

要为你的 Strapi 插件创建管理员权限，你需要在服务器端注册这些权限，然后再在管理端实现它们。

🌐 To create admin permissions for your Strapi plugin, you'll need to register them on the server side before implementing them on the admin side.

## 在服务器端注册权限 {#register-the-permissions-server-side}

🌐 Register the permissions server side

每个单独的权限都必须在插件的引导函数中注册，如下所示：

🌐 Each individual permission has to registered in the bootstrap function of your plugin, as follows:

```js title="/src/plugins/my-plugin/server/src/bootstrap.js"

'use strict';

const bootstrap = ({ strapi }) => {
  // Register permission actions.
  const actions = [
    {
      section: 'plugins',
      displayName: 'Access the overview page',
      uid: 'overview.access',
      pluginName: 'my-plugin',
    },
    {
      section: 'plugins',
      displayName: 'Access the content manager sidebar',
      uid: 'sidebar.access',
      pluginName: 'my-plugin',
    },
  ];

  strapi.admin.services.permission.actionProvider.registerMany(actions);
};

module.exports = bootstrap;
```

```js title="/src/plugins/my-plugin/server/src/bootstrap.ts"

const bootstrap = ({ strapi }: { strapi: Core.Strapi }) => {
  // Register permission actions.
  const actions = [
    {
      section: 'plugins',
      displayName: 'Access the overview page',
      uid: 'overview.access',
      pluginName: 'my-plugin',
    },
    {
      section: 'plugins',
      displayName: 'Access the content manager sidebar',
      uid: 'sidebar.access',
      pluginName: 'my-plugin',
    },
  ];

  strapi.admin.services.permission.actionProvider.registerMany(actions);
};

```

## 在管理面板端实现权限 {#implement-permissions-on-the-admin-panel-side}

🌐 Implement permissions on the admin panel side

在我们能够在管理员面板端实现权限之前，我们必须在一个可重用的配置文件中定义它们。这个文件可以存储在插件管理员代码的任何位置。你可以按如下方式操作：

🌐 Before we can implement our permissions on the admin panel side we have to define them in a reusable configuration file. This file can be stored anywhere in your plugin admin code. You can do that as follows:

```js title="/src/plugins/my-plugin/admin/src/permissions.js|ts"
const pluginPermissions = {
  'accessOverview': [{ action: 'plugin::my-plugin.overview.access', subject: null }],
  'accessSidebar': [{ action: 'plugin::my-plugin.sidebar.access', subject: null }],
};

```

### 页面权限 {#page-permissions}

🌐 Page permissions

一旦你创建了配置文件，你就可以准备实现你的权限。如果你使用 [plugin SDK init 命令](/cms/plugins-development/plugin-sdk#npx-strapisdk-plugin-init) 启动了你的插件，你将会有一个示例 `HomePage.tsx` 文件。要实现页面权限，你可以执行以下操作：

🌐 Once you've created the configuration file you are ready to implement your permissions. If you've bootstrapped your plugin using the [plugin SDK init command](/cms/plugins-development/plugin-sdk#npx-strapisdk-plugin-init), you will have an example `HomePage.tsx` file. To implement page permissions you can do the following:

```js title="/src/plugins/my-plugin/admin/src/pages/HomePage.jsx|tsx" {2,5,12,16}

const HomePage = () => {
  const { formatMessage } = useIntl();

  return (
    <Page.Protect permissions={pluginPermissions.accessOverview}>
      <Main>
        <h1>Welcome to {formatMessage({ id: getTranslation('plugin.name') })}</h1>
      
    </Page.Protect>
  );
};

```

你可以看到我们如何将权限配置文件与 `<Page.Protect>` 组件一起使用，以要求特定权限才能查看此页面。

🌐 You can see how we use our permissions configuration file together with the `<Page.Protect>` component to require specific permissions in order to view this page.

### 菜单链接权限 {#menu-link-permissions}

🌐 Menu link permissions

前面的例子确保了直接访问你页面的用户的权限会被验证。然而，你可能也想删除指向该页面的菜单链接。为此，你需要对 `addMenuLink` 实现进行修改。你可以按如下方式操作：

🌐 The previous example makes sure that the permissions of a user that visits your page directly will be validated. However, you might want to remove the menu link to that page as well. To do that, you'll have to make a change to the `addMenuLink` implementation. You can do as follows:

```js title="/src/plugins/my-plugin/admin/src/index.js|ts" {21-23,5}

  register(app) {
    app.addMenuLink({
      to: `plugins/${PLUGIN_ID}`,
      icon: PluginIcon,
      intlLabel: {
        id: `${PLUGIN_ID}.plugin.name`,
        defaultMessage: PLUGIN_ID,
      },
      Component: () => import('./pages/App'),
      permissions: [
        pluginPermissions.accessOverview[0],
      ],
    });

    app.registerPlugin({
      id: PLUGIN_ID,
      initializer: Initializer,
      isReady: false,
      name: PLUGIN_ID,
    });
  },
};

```

### 使用 `useRBAC` 钩子的自定义权限 {#custom-permissions-with-the-userbac-hook}

🌐 Custom permissions with the `useRBAC` hook

为了对管理员用户的权限获得更多控制，你可以使用 `useRBAC` 钩子。通过这个钩子，你可以像下面的示例一样按自己的意愿使用权限验证：

🌐 To get even more control over the permission of the admin user you can use the `useRBAC` hook. With this hook you can use the permissions validation just like you want, as in the following example:

```js title="/src/plugins/my-plugin/admin/src/components/Sidebar.jsx|tsx" 

const Sidebar = () => {
  const {
    allowedActions: { canAccessSidebar },
  } = useRBAC(pluginPermissions);

  if (!canAccessSidebar) {
    return null;
  }

  return (
    <div>Sidebar component</div>
  );
};

```