Write code to implement an Auth Guard for route protection

Question

Can i Write code to implement an Auth Guard for route protection.

Answer 1

An AuthGuard prevents unauthorized users from accessing specific routes. It uses Angular’s Route Guards to check authentication before navigating.

Step 1: Create an AuthGuard

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; // Allow navigation if authenticated

    }

    this.router.navigate(['/login']); // Redirect to login if not authenticated

    return false;

  }

}

Step 2: Implement AuthService

@Injectable({

  providedIn: 'root'

})

export class AuthService {

  isLoggedIn(): boolean {

    return !!localStorage.getItem('token'); // Example: Check if token exists

  }

}

Step 3: Apply AuthGuard in Routing Module

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

import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard.component';

import { LoginComponent } from './login.component';

import { AuthGuard } from './auth.guard';

const routes: Routes = [

  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },

  { path: 'login', component: LoginComponent },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule {}