Angular Router Guards

Introduction

Angular router guards are used to prevent unauthenticated or unauthorized users from accessing certain routes or pages in an application. They are used to analyze and control navigation to specific routes and can be used to create security layers in an application.

Syntax

Angular router guards use a specific syntax to define a guard for a route. Here is the syntax:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
 
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
 
  constructor(
    private router: Router
  ) {}
 
  canActivate(): boolean {
    // Your implementation of the guard goes here
    return true; // or false to prevent access
  }
 
}```

## Example
Here is an example of a canActivate guard that checks whether a user is logged in before allowing them to access a specific route:

```typescript
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

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

  constructor(
    private router: Router,
    private authService: AuthService
  ) {}

  canActivate(): boolean {
    const isAuthenticated = this.authService.isLoggedIn();
    if (!isAuthenticated) {
      this.router.navigate(['/login']);
    }
    return isAuthenticated;
  }

}

Output

The output of the above example is that if the user is not logged in, they will be redirected to the login page and prevented from accessing the guarded route.

Explanation

In the above example, the AuthGuard implements the CanActivate interface to indicate that it is a guard that can be used to control navigation to a route.

The guard checks whether the user is logged in by calling the AuthService's isLoggedIn method. If the user is not logged in, the guard will use the Router service to navigate to the login page and return false to prevent access to the guarded route.

Use

Router guards are a powerful tool for controlling navigation and creating security layers in an Angular application. Guards can be used to prevent unauthenticated or unauthorized users from accessing certain routes or pages, to redirect users to a specific page based on their authentication status, or to add additional checks or logic before allowing navigation to a route.

Important Points

• Angular router guards can be used to prevent unauthenticated or unauthorized users from accessing certain routes or pages in an application.
• Guards are used to analyze and control navigation to specific routes and can be used to create security layers in an application.
• Guards can be used to add additional checks or logic before allowing navigation to a route.
• Angular provides a number of built-in guard interfaces, such as CanActivate, CanActivateChild, CanDeactivate, and more.

Summary

Angular router guards are an important tool for creating secure and navigable Angular applications. With guard interfaces such as CanActivate and CanActivateChild, developers can control access to certain routes and add additional checks or logic to guard navigation. Guards are an essential part of any Angular application with multiple pages or routes.