CanActive is a guard to a route like auth middleware in laravel

1. create gaurd

                  ng g gaurd auth 
                 

                 import { Injectable } from '@angular/core';
                import { CanActivate, Router } from '@angular/router';
                import { AuthService } from './auth.service'; // Import your authentication 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 access to the route
                        } else {
                          // Redirect to the login page
                          this.router.navigate(['/login']);
                          return false;
                        }
                      }
                    }

                  

2. Configure Guard in Routes

                  import { NgModule } from '@angular/core';
                  import { Routes, RouterModule } from '@angular/router';
                  import { HomeComponent } from './home.component';
                  import { LoginComponent } from './login.component';
                  import { AuthGuard } from './auth.guard'; // Import your route guard service
                      
                  const routes: Routes = [
                        { path: '', component: HomeComponent, canActivate: [AuthGuard] },
                        { path: 'login', component: LoginComponent }
                      ];
                      @NgModule({
                        imports: [RouterModule.forRoot(routes)],
                        exports: [RouterModule]
                      })
                      export class AppRoutingModule { }

  

3. Use Guard in Components

  import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
      selector: 'app-home',
      template: `
        <div *ngIf="authService.isLoggedIn()">
          Welcome to the home page!
        </div>
      `
    })
    export class HomeComponent {
      constructor(public authService: AuthService) {}
    }