Route protection in Angular

In any complex web application, it is necessary to have some sort of authentication to restrict certain users from accessing specific pages.
For example-

1. Checking if a user has logged in. Suppose, if they’re not logged in, thus the guard will redirect to the register/login page.
2. Checking if a user has permission. It checks if the user have rights to access that page or not.

Route protection helps us in front-end frameworks to validate a route before it’s activated. Angular supports route protection via route guards.

A route guard validates a route and activates it only if authorized.

Angular allows you to authorize parent routes and child routes separately.

🌟 Implementing Route Protection in Angular using CanActivate

• Angular supports the CanActivate interface to authorize parent routes. This interface is implemented by a class that determines whether the router can activate a specific route or not.
• CanActivate Interface is defined in the @angular/router package. This 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.

• The canActivate method gets the instance of the ActivatedRouteSnapshot and RouterStateSnapshot which we can use 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 and we may write some logic to navigate to some other route in this case.
• The example of canActivate guard is as follows-

import { Injectable } from '@angular/core';
import {
  Router,
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from '@angular/router';

@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(private _router: Router) {}

  public canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    //check for some validation condition
    if (validation_Fails) {
      alert('You are not allowed to view this page');
      //redirect to login/home page etc
      //return false to cancel the navigation
      return false;
    }
    return true;
  }
}

• In the route configuration file, update the route definition with the canActivate guard as shown below. You can also apply more than one guard to a route.

🌟 Implementing Route Protection in Angular using CanActivateChild

• Angular supports the CanActivateChild interface to authorize child routes.
• CanActivateChild Interface is defined in the @angular/router package. This Interface has one method i.e. canActivateChild. We need to implement it in our Service. The details of the CanActivateChild interface is as shown below.

• The canActivateChild method gets the instance of the ActivatedRouteSnapshot and RouterStateSnapshot which we can use 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 canActivateChild guard.
• If all guards returns true, navigation to the route will continue.
• If any one of the guard returns false, navigation will be cancelled and we may write some logic to navigate to some other route in this case.
• We apply CanActivateChild guard to the parent route. The Angular invokes this guard whenever the user tries to navigate to any of its child route.

🌟 Controlling navigation using CanDeactivate

We use the CanDeactivate guard when we want to prevent the user from accidentally navigating away. The best use case for CanDectivate guard is the data entry component. The user may have filled the data entry and tries to leave that component without saving his work. The CanDeactivate guard gives us a chance to warn the user that he has not saved his work and give him a chance to cancel the navigation.

Conclusion-
Overall, route protection is an essential part of building secure and user-friendly Angular applications. By using route guards and other protective measures, you can ensure that your application is accessible only to authorized users and that sensitive data is kept safe from unauthorized access.