Restricting Permissions in Strapi Admin Panel 🔐

Project setup

1️⃣ In a terminal window, clone the repository.

git clone git@github.com:strapi/strapi.git
cd strapi && npm run setup
strapi new blog --dev
cd blog && strapi start
cd blog/admin && npm start

API setup

In this tutorial we will create a blog that contains articles. Each article is linked to several tags and vice versa, one category is linked to several categories. To create these content types we will use the Content-type Builder plugin that is already installed in each generated project.

Creating the needed Content-Types

Go to the Content Type Builder plugin and create the following content-types.

  • name (string)
  • description (text): if you want the Rich Text Feature enabled visit the Advanced Settings Tab and select Display as WYSIWYG
  • name (string)
  • articles (many-to-many relation with Article)
  • title (string)
  • articles (many-to-one relation with Article)

Approach

Currently, only admin users can access the administration panel, those admin users have all rights : they can create/delete/modify both Content Types and Data, set up permissions and modify the app’s settings.

Modify the User Model

For my blog API I want to create three “sub roles” : admin, author and editor. To do so, go to the User model in the content-type-builer and add a new enumeration field called admin_layout.

  • … (previous fields)
  • admin_layout (enumeration, required): admin,author,editor.

Updating the Users-Permissions plugin.

Since we created a dev project for the sake of the example we need to make sure the first registered user has the admin_layout "sub role" of type admin for your production one. So we need to set this default role from the front-end of the users-permissions plugin.

Part 1: Hiding the Plugins

In the first part we’re going to tackle the question of hiding/removing some plugins depending on the user’s role. Here what we want to do is delete a plugin from the UI only (it will still remain active in the back-end) and we will handle the special case of hiding the Users & Permissions one.

Back-End Setup

At some point we need to tell the administration which plugins to hide for a specific user “sub role”. To do so, we need to create an adminLayout.js file where we will write the UI's permissions and that the front-end will retrieve. Since this is a pure front-end "hack" the back-end configuration is pretty easy.

Front-End Setup

Now that our back-end is ready we need to undertake some complex front-end modifications. The first one is in the /admin folder. We are going to modify the following elements AdminPage, App, AppLoader, LeftMenuLinkContainer, Logout.

  • Create a new constant and an action to set our menu depending on the user’s sub role
  • Update our current reducer with a new key adminLayout
  • Create a new selector so we can retrieve the adminLayout property in our saga
  • Update the saga in order:
  • To retrieve the created file from the backend.
  • To delete the desired plugin from the front-end.
  • Modify the way we load the plugins

Part 2: Hiding Content Types

What if we want to hide some Content Types and maybe give access to the list view but prevent an admin user from creating a new entry?

Back-End Setup

Here we need to add two new keys to our adminLayout.js user's role : contentTypesToHide and contentTypeToReadOnly, you'll need to make the modifications and restart your Strapi server.

  • The AdminPage container
  • The Content-Manager EditPage
  • The Content-Manager ListPage
  • The ListPage
  • The EditPage with the same logic:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Strapi

Strapi

2.1K Followers

The open source Headless CMS Front-End Developers love.