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.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;

在管理面板端实现权限​

🌐 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

一旦你创建了配置文件，你就可以准备实现你的权限。如果你使用 plugin SDK 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, 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/${PLUGIN_ID}`,
      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 钩子的自定义权限​

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

/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;