Route protection in Angular
Tags: angular
Published: 2023-03-03 04:58:38

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq2k2agarmh3r6vdt08s.png)

- 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](https://angular.io/api/router/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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc3tgrnwv8fi6ybpnmco.png)


🌟 **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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zhohy47rrlcuosf4bs6.png)

- 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](https://angular.io/api/router/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.