Angular 7/6 | Use Auth Guards CanActivate and Resolve in Angular Routing Quick Example

Angular routing plays an important role in a real-world application which is responsible for loading different components which may have sensitive data as well. Angular provides a full proof mechanism to develop an application which can add a protecting shield for accessing components.

Angular Auth Guards.

Angular Auth Guards add authentication layer which helps in preventing loading of components in various scenarios like Login authentication, permission-based authentication etc. We can add checks before loading components using Angular guards which are of four types

CanActivate: Checks route navigation before the component is loaded.

CanActivateChild: Checks route children navigation before the component is loaded.

CanDeactivate: Checks navigation from the current route eg leaving partially filled form.

Resolve: Resolve loads/ retrieves data before the route is activated.

CanLoad: Checks to see if a user can route to a module that lazy loaded.

Here we will discuss only CanActivate and Resolve Guards. For demonstration, we will create a sample application in Angular’s latest version 7 having IMDB API service to fetch scary movies series 😛

Let’s get started!

Make sure you have the latest version on Angular CLI installed

 

Create a new Angular project with Routing enabled and Styling selected to CSS

Create new pages and services

We will create Home, Details pages with new Guard services for CanActivate and Resolve. Run following cmd in ng CLI to create pages and services

Added –spec false to not create spec files by default

Application Routing

In the app-routing.module.ts file, we have Routes for Home and Details pages.

Modify Route path for details to add parameter ‘imbdid’ which will be passed go get movie details using HTTP get calls

 

CanActivate service

FooGuard service will implement CanActivate interface to act as CanActivate Guard which we will add in Routes. Replace below code in the foo-guard.service.ts file

Here we are calling IMDB free API using Angular’s HttpClient get method. In the canActivate method, we are returning an Observable then handling response using Rxjs map, catchError, of methods.

canActivate return true or false according to login we add in it, which can be a login authentication. Here we are just checking if the response is error or movie details. Based or response returning boolean. We canActivate get false, details route will not be activated and if true details route will navigate successfully.

 

Similarly, in Foo Resolve service we will implement Resolve interface then add a resolve method. Replace below code in the foo-resolve.service.ts file.

In this service, we have resolve method which is simply getting movie details using a get call.

Resolve is basically used to retrieve data which may be from remote servers. Route navigates to the page only after the resolve method is finished its operation.

 

Add Resolve and CanActivate Guards in Routes

In the app-routes.module.ts file, we will modify details route to add canActivate and resolve parameters.

canActivate can have any number of Guards in the array. resolve will take the response from the service’s resolve method then pass to movie attribute.

Update Home and Details Components

In Home, we will have a list of movies on click on which details page with that movie details will open. Here we have “Scary Movie 5” which is not found at canActivate service and will return false to show an Alert message.

home.component.html

In the home.component.ts file, there is nothing to update

In Details, component we will get Route snapshot of “movie” which we passed in Routes resolve attribute to show details.

details.component.ts

details.component.html

That’s it 🙂 now you can run your application in a browser by running

Angular Guards is a very important mechanism to understand as a web application can have multiple scenarios where authentication based access is required. We will discuss other Guards type in future posts.

 

 

 

Leave a Reply

avatar
  Subscribe  
Notify of