Angular CanActivate Guard Example

The Angular CanActivate guard runs before we navigate to a route allowing us to cancel the navigation. In this tutorial, we will learn what is CanActivate guard is and how to use it to protect the route. We will build a simple CanActivate Example app to show you how to use it in real application

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

What is CanActivate Guard

The Angular CanActivate guard decides, if a route can be activated ( or component gets rendered). We use this guard, when we want to check on some condition, before activating the component or showing it to the user. This allows us to cancel the navigation.

Use cases for the CanActivate Guard

  • Checking if a user has logged in
  • Checking if a user has permission

One of the use case of this guard is to check if the user has logged in to the system. If user has not logged in, then the guard can redirect him to login page.

How to use CanActivate Guard

First, we need to create a Angular Service.

The service must import & implement the CanActivate Interface. This Interface is defined in the @angular/router module. The Interface has one method i.e. canActivate. We need to implement it in our Service. The details of the CanActivate interface is as shown below.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

The method gets the instance of the ActivatedRouteSnapshot & RouterStateSnapshot. We can use this to get access to the route parameter, query parameter etc.

The guard must return true/false or a UrlTree . The return value can be in the form of observable or a promise or a simple boolean value.

A route can have more than one canActivate guard.

If all guards returns true, navigation to the route will continue.

If any one of the guard returns false, navigation will be cancelled.

If any one of the guard returns a UrlTree, current navigation will be cancelled and a new navigation will be kicked off to the UrlTree returned from the guard.

The example of canActivate guard is as follows

Update the route definition with the canActivate guard as shown below. You can apply more than one guard to a route and a route can have more than one guard

CanActivate guard Example

In our example application, we will create three components. The HomeComponent & ContactComponent are not protected and can be accessed any user. The user must log in into the system to access the ProductComponent..We also need a LoginComponent to handle the user login.

LoginComponent

The following is the code for LoginComponent and associated AuthService

login.component.ts

login.component.html

auth.service.ts

The AuthService checks whether the user is allowed to login. It has the method to login & logout the users. Our implementation of the login method does not check for anything. It just marks the user as logged in.

ProductComponent

The ProductComponent is our protected component. Only the logged in users can access this. This component displays the list of Products, which it gets from the ProductService.

product.component.ts

product.component.html

product.service.ts

product.ts

Other Component

app.component.ts

app.component.html

home.component.ts

contact.component.ts

CanActivate Guard

Finally, we build a CanActivate guard, which will check whether the users are logged in or not. If users are not logged in, then they are redirected to the login page.

auth-guard.service.ts

First, we import the CanActivate from the @angular/router module.

The AuthGuardService implements the CanActivate interface

Inject the AuthServce in the constructor of the Guard

In the CanActivate method, we will redirect the user the login page, if the user is not logged in. To cancel the navigation ,we must either return false or urlTree as shown in the example above.

Next, we will update the route definition and use the guard in all the routes, which we want to protect

app.routes.ts

Finally, register the service in the app.module.

app.module.ts

Run the app. You can access the Product page only if you login as shown in the image below.

Angular CanActivate guard Example

Reference

CanActivate Interface

2 thoughts on “Angular CanActivate Guard Example”

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top