Site icon Sails Software Inc

How to implement Auth Guard: Angular

What is Route Guard?

Angular route guards are the interfaces which can tell the router if the user has permission to access the route or not. It is used to secure the route paths by preventing users from navigation to parts of an app without authorization.

They make this decision by looking for a true or false return value from a class which implements the given guard interface.

We can generate any number of guards based on our application requirements.

5 types of guards are there

What is AuthGuard and how to implement it?

AuthGuard is an angular route guard used to protect the routes from unauthenticated/unauthorized people.

It is implemented using the canActivate interface which implements a canActivate function that checks whether the current user has permission to activate the requested route.

If the method returns true, then the route is activated or else if the method returns false then it will be redirected to the login page.

 Step1: create a new angular app using the following command

Command: ng new <app-name>

Step2: first let’s open your created app, later create authguard with the following command

command: ng g guard <authguard-name>

Here you will get different interfaces options so you can choose what ever interface you want to implement. Here I choose CanActivate.

Step3: create a service and write a method in it.

Command: ng g s <service-name>

Once you create the service file, implement a method where you can write logic in it. Here I attached sample code, in this we get our local storage data.

Step 4: open the authguard.service.ts file which we previously created and change the code given below

The canActivate() method from authguard returns true only when the route can be navigated. In the case of a false value, navigation can be redirected to the login page. The service injects AuthService and Router and has a single method called canActivate. This method is necessary to properly implement the CanActivate interface.

The canActivate method returns a Boolean indicating whether or not navigation to a route should be allowed.

If the user isn’t authenticated, they are re-routed to some other place, in this case a route called /login.

Step5: Open app-routing.module.ts

Now the guard can be applied to any routes you want to protect

The /dashboard route has an extra value now. The AuthGuard that was created is passed to an array for canActivate which means it will be run any time someone tries to access the /dashboard route. If the user is authenticated, they get to the route. If not, they are redirected to the /login route.

In this way we can secure the route paths by preventing users from navigation to parts of an app without authorization.


Written by

Manga Guddety

Associate Software Engineer



Exit mobile version