Поскольку я являюсь одним из основных разработчиков Strapi (самой продвинутой CMS с открытым исходным кодом для управления вашим контентом без усилий.), меня часто спрашивают в Slack:

Участник сообщества: Привет, Сирил, у вас есть расчетное время прибытия для этого плагина ролей администратора? Мне действительно нужна эта функция для моего клиента…

Я: Боже, мы стабилизируем структуру и делаем ее более расширяемой, чем она есть, поэтому, честно говоря, я понятия не имею.

Что ж, на прошлых выходных я почувствовал необходимость попытаться найти чисто интерфейсное решение, чтобы скрыть плагины и типы контента в зависимости от роли администратора, чтобы пользователь Strapi мог удовлетворить потребности своих клиентов.

Идея этой статьи состоит в том, чтобы предоставить быстрый способ скрыть некоторые представления для роли администратора конкретного пользователя. Однако, поскольку это внешний вид, я должен заявить, что серверная часть не будет иметь никакого значения между «подролями», установленными для панели администрирования (так что на самом деле это не так secure), и такую ​​логику, возможно, необходимо применить как в пользовательском интерфейсе Strapi, так и на сайте вашего клиента.

‼ ️ ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ

Мы не будем оказывать никакой поддержки в отношении ошибок, связанных с этой статьей, и, поскольку база кода развивается очень быстро, эта логика, скорее всего, изменится < br /> (если я внесу незначительные изменения в админку, все будет нестабильно).

👇
Мы также рекомендуем использовать компьютер Mac / Linux для следования этому руководству.
В настоящее время у нас возникают проблемы с Windows и нашим интерфейсным стеком.

Теперь, когда все сказано, давайте рассмотрим практический пример!

Настройка проекта

1. В окне терминала клонируйте репозиторий.

git clone [email protected]:strapi/strapi.git

2️⃣ Затем запустите настройку.

cd strapi && npm run setup

3️⃣ Откройте новое окно терминала, создайте новый проект и установите нужную базу данных.

strapi new blog --dev

4️⃣ Запустите сервер.

cd blog && strapi start

5. В новом окне терминала запустите интерфейсный сервер.

cd blog/admin && npm start

6️⃣ Перейдите на localhost: 4000 / admin.

Настройка API

В этом руководстве мы создадим блог, содержащий статьи. Каждая статья связана с несколькими тегами, и наоборот, одна категория связана с несколькими категориями. Для создания этих типов контента мы будем использовать плагин Content-type Builder, который уже установлен в каждом сгенерированном проекте.

Создание необходимых Content-Type

Перейдите в Плагин Content Type Builder и создайте следующие типы контента.

👉 Article

Затем нажмите кнопку «Сохранить», и в левом меню должен появиться тип контента. Повторите этот процесс для остальных типов контента.

👉 Tag

  • name (строка)
  • articles (отношение "многие ко многим" с Article)

👉 Category

  • title (строка)
  • articles (отношение "многие к одному" с Article)

На этом этапе в левом меню должны отображаться 4 модели. Кстати, меня всегда поражало, насколько быстро Strapi создает API.

Теперь, когда блог создан, я собираюсь объяснить свой подход к скрытию и блокировке некоторых плагинов в зависимости от роли администратора.

Подход

В настоящее время только пользователи-администраторы могут получить доступ к панели администрирования, эти пользователи-администраторы имеют все права: они могут создавать / удалять / изменять как Типы контента, так и Данные, настроить разрешения и изменить настройки приложения.

Чтобы скрыть некоторые части панели администрирования, нам нужно добавить поле в существующую Модель пользователя, например admin_layout, которое мы собираемся использовать для увеличения нагрузки. наш интерфейс. Когда пользователь входит в систему, интерфейсная часть извлекает эту «подроль» и, в зависимости от нее, удаляет элементы или функции из интерфейса.

Созданная «подроль» будет влиять только на интерфейс, для внутреннего интерфейса эти пользователи-администраторы по-прежнему будут иметь все права, поэтому вам может потребоваться применить такой же подход в своем клиентском приложении.

Изменить модель пользователя

Для API моего блога я хочу создать три подроли: admin, author and editor. Для этого перейдите к модели Пользователь в построителе типов содержимого и добавьте новое поле перечисления с именем admin_layout.

👉 User

  • … (предыдущие поля)
  • admin_layout (обязательное перечисление): admin,author,editor.

Не забудьте посетить Вкладку дополнительных настроек, нажмите required и сохраните изменения. Наконец, ваша модель должна выглядеть так:

Мы создали специальное поле admin_layout, которое необходимо для администратора, чтобы скрыть элементы из меню.

Единственная проблема сейчас заключается в том, что у первого зарегистрированного пользователя (вы с тех пор, как вы начали новый проект) нет этого свойства, поэтому мы собираемся изменить users-permissions плагин.

Обновление плагина Users-Permissions.

Поскольку мы создали dev проект для примера, нам нужно убедиться, что первый зарегистрированный пользователь имеет admin_layout «вспомогательную роль» типа admin для вашей производственной. Поэтому нам нужно установить эту роль по умолчанию в интерфейсе плагина users-permissions.

С этой модификацией первый зарегистрированный пользователь будет иметь подроль admin.

На этом этапе мы только что создали наш API и добавили новое поле в существующую модель User. Теперь мы посмотрим, как скрыть некоторые плагины, а затем как скрыть типы контента и представления в зависимости от подроли пользователя-администратора.

⚠️ Не забудьте очистить всех своих пользователей и обновить интерфейс ⚠️
Для этого перейдите в Менеджер контента и нажмите кнопку корзины.
Затем перезапустите приложение и обновите страницу в браузере.

Часть 1: Скрытие плагинов

В первой части мы собираемся решить вопрос о скрытии / удалении некоторых плагинов в зависимости от роли пользователя. Здесь мы хотим удалить плагин только из пользовательского интерфейса (он по-прежнему останется активным в серверной части), и мы обработаем особый случай скрытия Пользователи и разрешения один.

Внутренняя установка

В какой-то момент нам нужно сообщить администрации, какие плагины скрыть для определенного пользователя «подроли». Для этого нам нужно создать adminLayout.js файл, в котором мы будем записывать разрешения пользовательского интерфейса и который будет извлекать интерфейс. Поскольку это чисто интерфейсный «хак», настроить серверную часть довольно просто.

1- Создайте файл adminLayout.js.

2- Отправьте во внешний интерфейс.

Этот шаг - единственная внутренняя конфигурация, которую нам нужно сделать, остальное будет только внешней хакерской атакой…

♻️ Не забудьте перезагрузить сервер ♻️
cd blog && strapi start

Front-End настройка

Теперь, когда наш бэкэнд готов, нам нужно провести некоторые сложные модификации интерфейса. Первый находится в папке /admin. Мы собираемся изменить следующие элементы: AdminPage, App, AppLoader, LeftMenuLinkContainer, Logout.

Изменение контейнера приложения

Здесь нам просто нужно внести незначительное обновление, чтобы указать контейнеру AppLoader, чтобы он прекратил показывать загрузчик, если плагин был удален из нашего магазина. Поскольку будет разница между количеством плагинов, которые должен загружать интерфейс, и теми, которые загружаются, если мы не обновим эту часть, приложение будет показывать загрузчик на неопределенный срок.

Изменение контейнера AppLoader

Прежде чем продолжить, мы должны обновить shouldLoad экземпляр этого контейнера.

Изменение контейнера AdminPage

В этом разделе мы собираемся:

  • Создайте новую константу и действие для настройки нашего меню в зависимости от подроли пользователя.
  • Обновите текущий редуктор, добавив новый ключ adminLayout
  • Создайте новый селектор, чтобы мы могли получить свойство adminLayout из нашей саги
  • Обновите сагу в следующем порядке:
  • Получить созданный файл из бэкэнда.
  • Чтобы удалить нужный плагин из интерфейса.
  • Измените способ загрузки подключаемых модулей

1️⃣ Создайте новую константу и действие в контейнере AdminPage.

2️⃣ Обновите текущий редуктор, добавив новый ключ adminLayout

3️⃣ Создайте новый селектор, чтобы мы могли получить свойство adminLayout из нашей саги.

4️⃣ Обновите сагу, чтобы получить adminLayout и скрыть нужные плагины.

5️⃣ Изменение способа загрузки наших плагинов

На этом этапе вы, возможно, заметили, что мы обрабатываем особый случай, когда пытаемся скрыть users-permissions плагин для определенной роли. Это связано с тем, что если вы удалите этот плагин из нашего основного магазина, аутентификация не будет применяться в нашем интерфейсе, поэтому пользователь не сможет отправлять какие-либо запросы. на бэкэнд. Чтобы скрыть этот плагин в приложении, мы собираемся обновить компонент LeftMenuLinkContainer. Мы уже рассмотрели случай попытки доступа к этому плагину с использованием URL-адреса, поскольку он будет отображать BlockerComponent.

Изменение компонента LeftMenuLinkContainer

Идея здесь в том, чтобы просто убрать ссылку из меню.

Изменение компонента выхода

После всех этих изменений мы столкнулись с новой проблемой: как сбросить все наши изменения, если пользователь выходит из системы и входит в систему с новой учетной записью? Мы должны « сбросить »наш макет, и самый простой способ - перезагрузить наше приложение.

Часть 2: Скрытие типов контента

Что, если мы хотим скрыть некоторые типы контента и, возможно, предоставить доступ к представлению списка, но запретить пользователю с правами администратора создавать новую запись?

Для этого нам нужно добавить новые ключи в файл adminLayout.js, чтобы интерфейсная часть знала, какие типы контента отображать, а какие создавать представления, которые нужно заблокировать.

Внутренняя установка

Здесь нам нужно добавить два новых ключа к нашей adminLayout.js роли пользователя: contentTypesToHide и contentTypeToReadOnly, вам нужно будет внести изменения и перезапустить сервер Strapi.

♻️ Не забудьте перезагрузить сервер ♻️
cd blog && strapi start

Подход

В этой части мы не только будем скрывать типы контента из левого меню, но также и предотвращать доступ к некоторым представлениям с помощью нашего BlockerComponent.

Прежде чем копаться в коде, нам нужно понять, как отображаются ссылки типов контента в левом меню. Здесь происходит следующее: когда content-manager монтируется в нашем приложении, вызывается его bootstrap.js файл, и он вставляет в наше основное хранилище свойство plugin, содержащее leftMenuSections, в котором находится весь наш контент. ссылка типов. Затем, LeftMenuLinkContainer "найдите" это свойство во всех наших подключаемых модулях, чтобы отобразить различные ссылки.

Как и в первой части этого руководства, мы изменим сагу о AdminPage, чтобы она обновляла эти ключи, удаляя нужные типы контента из объекта одного плагина. Чтобы сделать интерфейс немного более безопасным, мы не только удалим типы контента из левого меню, но и убедимся, что к определенному типу контента нет доступа. (если так сказано), введя URL-адрес прямо в браузере.

Для этого мы создадим объект ctmAdminLayout в редукторе AdminPage, который мы собираемся передать content-manager, используя старый API контекста React.

Администратор использует первый контекстный API, и я скоро обновлю его до последнего, поэтому вам, возможно, придется внести некоторые дополнительные изменения.

Вот элементы, которые нам нужно изменить:

  • Контейнер AdminPage
  • Content-Manager EditPage
  • Content-Manager ListPage

Обновите AdminPage

Поскольку мы хотим сохранить новое свойство в редукторе, нам нужно создать новую константу, действие и добавить ее в редуктор.

1️⃣ Создайте новую константу:

2️⃣ Создать новое действие:

3️⃣ Обновите редуктор:

На данный момент в нашем приложении ничего не происходит, модель Пользователь все еще отображается, хотя мы сделали ее скрытой в нашем adminLayout.js файле. Как и в первой части, мы собираемся разработать логику в saga.

4️⃣ Обновите сагу, чтобы удалить типы контента из левого меню:

Наконец, нам нужно передать объект ctmAdminLayout плагину content-manager.

5️⃣ Обновите index.js

Приведенный выше код удалит только соответствующие типы контента из левого меню. Теперь нам нужно изменить диспетчер содержимого, чтобы сделать соответствующие представления недоступными, установив непосредственно URL-адрес в браузере.

Обновите плагин Content-Manager

Как и в случае с users-permissions плагином, мы собираемся использовать BlockerComponent, чтобы запретить пользователю доступ к представлению, которое он не может.

Как вы могли заметить, я ввел ключ contentTypestoReadOnly в файл adminLayout.js, который позволяет пользователю просто отображать данные в ListPage контейнере. Поэтому, если это условие выполнено, нам нужно сначала скрыть кнопку создания, а затем заблокировать представление, если он пытается получить доступ к типу контента по URL-адресу.

В этой части мы только обновим два контейнера в content-manager:

  • ListPage
  • EditPage с той же логикой:

1️⃣ Обновите контейнер ListPage:

2️⃣ Обновите контейнер EditPage:

♻️ Не забудьте обновить интерфейс ♻️

Что ж, мы сделали много изменений, но я думаю, что вы можете расширить эту логику в соответствии со своими потребностями. Напоминаем, что возможно, потребуется обновить код, но это будет временное решение, пока мы не выпустим Admin & Permissions плагин.

Ваше мнение? Прокомментируйте, пожалуйста, ниже, чтобы сообщить нам, был ли этот совет полезен для ваших нужд. А если вам нужна дополнительная помощь, задавайте свои вопросы на StackOverflow, GitHub или Slack.

Если вам понравилось, помогите нам, поделившись этим постом в социальных сетях и поставив нам звезду на GitHub!

Первоначально опубликовано на blog.strapi.io 19 декабря 2018 г.