Chapter 1: Understanding Auth Guard in Angular

In Angular, the AuthGuard serves as a protective mechanism for your application’s routes. It determines whether specific users can access certain parts of the app based on their authentication status.

To utilize the AuthGuard, you must create a service that implements the CanActivate interface in a new class. This class will contain a method named canActivate(), which evaluates if the current user is permitted to access the desired route.

Here's a sample implementation of the AuthGuard service:

import { Injectable } from '@angular/core';

import { CanActivate, Router } from '@angular/router';

import { AuthService } from './auth.service';

@Injectable({

providedIn: 'root'

})

export class AuthGuard implements CanActivate {

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

canActivate(): boolean {

if (this.authService.isLoggedIn()) {

return true;

} else {

this.router.navigate(['/login']);

return false;

}

}

}

In this implementation, the AuthGuard service injects both the AuthService and Router to facilitate the functionality of the canActivate() method. This method checks the user's login status by calling the isLoggedIn() method from AuthService. If the user is authenticated, it allows access to the route by returning true. Conversely, if the user is not logged in, it redirects them to the /login route and returns false, thus denying access.

Once the AuthGuard service is established, you can apply it to protect routes in your Angular application by adding it to the canActivate property in your route configuration. For instance:

const routes: Routes = [

{

path: 'dashboard',

component: DashboardComponent,

canActivate: [AuthGuard]

}

];

In this example, the AuthGuard service secures the dashboard route, ensuring that only authenticated users can access it. Users who are not logged in will be sent to the /login page.

Chapter 2: Conclusion on Route Protection

By implementing the AuthGuard service, you can ensure that your Angular application routes are secure and only accessible to authenticated users. This not only enhances user experience but also protects sensitive areas of your application from unauthorized access.