Route Guards

In Angular, routing plays a significant role in creating single-page applications. Route Guards is a feature of Angular Routing that allows developers to control the accessibility of certain routes in their applications. They can limit who can access a route, when a route can be activated, deactivated, or loaded lazily, and whether a user can leave a route. In this tutorial, we will learn all about Route Guards, their different types, and how to create and use them.

What are Route Guards

In Angular, a route guard is a type of service that implements certain interfaces to decide if a route can be activated, deactivated, or a module can be loaded lazily. These interfaces are CanActivate, CanActivateChild, CanDeactivate, and CanLoad.

This feature is particularly useful when you want to protect certain routes from unauthorized access or prevent navigation away from a route under specific conditions.

Types of Route Guards

Angular provides four types of route guards:

1. CanActivate: This route guard checks whether a route can be activated or not. It is typically used for protecting a route from unauthorized access.

2. CanActivateChild: This route guard works similarly to CanActivate but it checks for child routes instead. You can use this when you want to prevent navigation to a child route.

3. CanDeactivate: This route guard checks whether a route can be deactivated or not. This is usually used to prevent users from accidentally leaving a route where unsaved changes exist.

4. CanLoad: This route guard checks whether a lazily-loaded module can be loaded or not. It can be used to prevent downloading and rendering of modules based on certain conditions.

How to Create a Route Guard

Creating a route guard involves creating a service that implements one of the route guard interfaces. Let's create a simple CanActivate route guard:

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor() { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    // Add your logic here to check if route can be activated
    return true;
  }
}

In the above code, we have created a AuthGuard service that implements the CanActivate interface. The canActivate method returns a boolean indicating whether a route can be activated or not.

How to Use a Route Guard

To use a route guard, we need to add it to the canActivate property of the route configuration. Here's how to do it:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the above code, the AuthGuard is applied to the 'protected' route. Now, whenever the 'protected' route is navigated to, the canActivate method of the AuthGuard will be called.

Conclusion

Route Guards are a powerful feature of Angular that can help you control the navigation in your application. They can protect routes from unauthorized access, prevent navigation away from a route, or control the loading of lazily-loaded modules. By understanding and using route guards effectively, you can make your Angular applications more secure and user-friendly.