Restraint access by ACL on angular 9
By: Adil Ech-Charafi
Tags: Angular9, Angular Cli, Acl, Angular, Guard

In complex applications, you will often face the problem that access decisions cannot only be based on the person ( Token ) who is requesting access, but also involve a domain object that access is being requested for. This is where the ACL system comes in.

Imagine you are designing a blog system we your user can comment on posts, Now, you want a user to be able to edit their own comments, but not those of other users; besides, you want to be able to delete all comments. In this scenario, Comment would be the domain object that you want to restrict access to.

To do that you need to allow :

Edit button for user comment.

Delete button for admin.

Add post route for admin.

Prerequisite

This article is for advanced angular developer, if you are a beginner (welcome to the family 😍😘) I invite you to read below articles:

Object Model

One of the benefits of Typescript is strongly-typed super set of JavaScript, It encourages a more declarative style of programming through things like interfaces and static typing (more on these later).

So let’s create our User model interface:

As you can see, the role has a special type “AppRole”, let’s create it 😉

AppRole is a custom typescript Type is a simple string with limited values that throw error if a non existed value assigned to a variable with this type.

User Service

To access to connected user information, we have to create a service.

I always use Angular-cli to generate service, is very helpful.

ng generate service user

UserService.ts

The service contains :

A public currentUser observable.

A setter function to set connected user.

A getter function to get last value emitted on user observer, this why I used BehaviorSubject.

ACL

The authentication system is ready, we have also a user service to access to user information anywhere, it’s time to go further and dive into ACL system.

ACL is a simple access control list, in our programation language is a key value list, where the value is a list of AppRole.

The example below contains the AclType & Constant with values.

ACL is a constant with :

Key: route name

Value: Role list or ‘*’ to accept all roles.

We need ACLService to get access information anywhere:

The functions check if :

User has no permission, return false.

ACL permission contains “*”, return true.

Check if user role has permission to access.

Our ACL system is ready, now let’s go to restraint access to angular route.

Angular Guard

Angular’s route guards are interfaces which can tell the router whether or not it should allow navigation to a requested route. They make this decision by looking for a true or false return value from a class which implements the given guard interface.

There are five different types of guards and each of them is called in a particular sequence. The router’s behavior is modified differently depending on which guard is used. The guards are:

CanActivate

CanActivateChild

CanDeactivate

CanLoad

Resolve

We won’t get too much into the details of each guard here but you can see the Angular docs for more.

Let’s create our ACL guard 😎.

ng generate guard acl

In our guard we implement CanActivate interface.

CanActivate function that return a boolean & check if user is connected & have permission to access in this route, by route name data.

Our guard is ready, let’s add it to app-routing:

For all route we define a data.name that contains route name.

Now the ACL first part is ready, and angular will redirect user who don’t have permission to 403 page (don’t forget to create it 😉).