There’s always that moment when you need to implement authentication and authorization to an application and, besides intercepting and protecting requests, we also need to protect the application’s routes. Angular uses Route Guards through canActivate and or canLoad methods to decide whether a route or a child module should be available or not, and, it can use multiple conditions – or Guards – to decide that.

Both canActivate and canLoad methods are going to be valid once and only whether all Guards informed are valid. Consequently, there’s no “or” condition. It works perfectly for most of the cases as, for instance, when we want to make sure to that a user is authenticated – AuthGuard – and also make sure that the logged user is an admin – AdminGuard. However, it might be tricky to validate if a given logged user is either Member or Author exclusively, hypothetically. In this case, we cannot use both Guards in a route because a Member not necessary is going to be an Author as well. That’s when we need to use an AccessRole Guard.

An AccessRole Guard is going to decide if a route or a child module would be activated whether the user has at least one of the required roles to access a certain route.

One way of doing this is informing in the data object, from a route definition, which role that route is supposed to accept. The next step would be to create a new Guard that would read that data from the route definition and run the validations that will decide if that route should active or not.

I created an example of this implementation and shared it on Gist. I’m happy that Angular allows us to solve it in such a simple way.

Published by Daniel Salvagni

A Brazilian front-end developer currently based in Berlin.

Leave a comment

Your email address will not be published. Required fields are marked *