Skip to main content

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

¥How to create admin permissions from plugins

使用 开发 Strapi 插件 时，你可能需要为你的插件创建管理员权限。通过这种方式，你可以接入 Strapi 的 基于角色的访问控制 (RBAC) 系统，从而有选择地授予插件特定部分的权限。

¥When developing a Strapi plugin, you might want to create admin permissions for your plugin. By doing that you can hook in to the RBAC system 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

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

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

/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',
      pluginName: 'my-plugin',
    },
    {
      section: 'plugins',
      displayName: 'Access the content manager sidebar',
      uid: 'sidebar',
      pluginName: 'my-plugin',
    },
  ];

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

module.exports = bootstrap;

在管理面板端实现权限​

¥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:

/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 }],
};

export default pluginPermissions;

页面权限​

¥Page permissions

创建配置文件后，即可开始实现权限设置。如果你已使用 插件 SDK 初始化命令 引导插件，则会得到一个示例 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, you will have an example HomePage.tsx file. To implement page permissions you can do the following:

/src/plugins/my-plugin/admin/src/pages/HomePage.jsx|tsx
import { Main } from '@strapi/design-system';
import { Page } from '@strapi/strapi/admin';
import { useIntl } from 'react-intl';

import pluginPermissions from '../permissions';
import { getTranslation } from '../utils/getTranslation';

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

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

export { HomePage };

你可以查看我们如何将权限配置文件与 <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

前面的示例确保对直接访问你页面的用户的权限进行验证。你可能还需要移除指向该页面的菜单链接。为此，你需要对 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:

/src/plugins/my-plugin/admin/src/index.js|ts
import { getTranslation } from './utils/getTranslation';
import { PLUGIN_ID } from './pluginId';
import { Initializer } from './components/Initializer';
import { PluginIcon } from './components/PluginIcon';
import pluginPermissions from './permissions';

export default {
  register(app) {
    app.addMenuLink({
      to: `plugins/${PluginIcon}`,
      icon: PluginIcon,
      intlLabel: {
        id: `${PLUGIN_ID}.plugin.name`,
        defaultMessage: PLUGIN_ID,
      },
      Component: async () => {
        const { App } = await import('./pages/App');

        return App;
      },
      permissions: [
        pluginPermissions.accessOverview[0],
      ],
    });

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

使用 useRBAC hook 自定义权限​

¥Custom permissions with the useRBAC hook

要更精细地控制管理员用户的权限，可以使用 useRBAC hook。使用此钩子，你可以像以下示例一样使用权限验证：

¥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:

/src/plugins/my-plugin/admin/src/components/Sidebar.jsx|tsx
import React from 'react';
import { useRBAC } from '@strapi/strapi/admin';

import pluginPermissions from '../../permissions';

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

  if (!canAccessSidebar) {
    return null;
  }

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

export default Sidebar;