This content originally appeared on Level Up Coding - Medium and was authored by Fabian Saacke
Angular — required roles directive
Dynamically disable elements with Role-Based Access Control (RBAC) through a directive
In many applications, an authentication mechanism for the user is required. Furthermore, users may have different roles that enable different functions or are used to decide whether a user is the user is authorised to view or access a feature. In this article, I show you how to use Angular directives to dynamically disable elements, e.g. a button, for users without a specific role.
Prerequisites
For this example, I will not cover the authentication of users in general, but assume that the app already has an authentication mechanism implemented. Therefore you should be
- Familiar with OIDC, oAuth2 and JWT (a common library to integrate authentication is angular-oauth2-oidc)
- Familiar with Role-Based Access Control (RBAC)
The scenario
Role-based access control (RBAC) is an approach to restrict access to an application based on the roles of the user, e.g. within an organisation or company. Consider the following example: we have an app in which employee data is managed. The employees should only be able to read data in the application. The managers, on the other hand, can edit the data. Hence, we now have two different roles and want to deactivate particular functions for one role.
Let’s get it done
As stated above, we assume that the app already authenticates the users and thus we also receive a token (JWT). Let’s now create our directive.
We use the Angular CLI with the following command:
ng generate directive required-roles
This will generate a new directive:
First, we need to add a property to our directive that we will use as input for the required role. This property can be a string or an array if you want to check for multiple roles.
Next, we need to modify the HTML element to which the directive is attached. For this we can use the ElementRef, which serves as a wrapper around the element in our view. Used in combination with Renderer2, we can manipulate the DOM.
Last, we need a method to check the role. For this, we can use, for example, a service that checks whether the user token contains the respective role.
The final directive might look like this:
We have the input for the requiredRole, that we validate through the RolesService, and if the user does not have the required role, the host element will be disabled. As you can see, the Renderer2 can manipulate the DOM at runtime and set attributes on elements or change their styling. It is a really powerful built-in API of the Angular core package (To find all the available methods checkout the officials docs).
To use the directive, e.g. on a button, simply add it to the HTML element with a value for the required role. In the following example, the button will be disabled for users, that do not have the role admin:
Finally, let’s look at the purpose of the RolesService. Here we inject an AuthService (e.g. the one from the mentioned authentication library) to access the user token. In case the roles in the token-claims match the required role, the user is authorised.
I also added a small prototype in this StackBlitz (no authentication included).
What’s next
Some ideas for additional functionality:
- Adjust the directive to also validate multiple roles
- Improve role validation to support different operators such as OR, i.e. user has role X or role Y.
Follow me on Medium or Twitter to read more about Angular!
Level Up Coding
Thanks for being a part of our community! More content in the Level Up Coding publication.
Follow: Twitter, LinkedIn, Newsletter
Level Up is transforming tech recruiting ➡️ Join our talent collective
Angular — required roles directive was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Fabian Saacke
Fabian Saacke | Sciencx (2022-06-27T11:53:35+00:00) Angular — required roles directive. Retrieved from https://www.scien.cx/2022/06/27/angular-required-roles-directive/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.