How to protect dashboard page in angular if user is not logged in using canActive guard?

 

If your making an website using angular and added Login features but want to protect a page if user is not logged in i will help you to code.

In Angular, the CanActivate guard is used to prevent unauthorized access to certain routes by checking whether the user is authenticated or authorized to access that route. Here are the steps to use the CanActivate guard:

Create a guard file using the Angular CLI command ng generate guard guard-name. This will create a new file in the guards folder with the name guard-name.guard.ts.

In the guard-name.guard.ts file, implement the CanActivate interface and its canActivate() method.

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree > | Promise<boolean | UrlTree> | boolean | UrlTree {
    // Check if user is authenticated or authorized to access the route
    return true; // Return true or false base on the check
  }
}

Add the guard to the route that you want to protect in the app-routing.module.ts file.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent, canActivate: [AuthGuard] }
];

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

In this example, the AuthGuard is added to the about route, which means that the canActivate() method in the AuthGuard will be called before allowing the user to access the about route. If the canActivate() method returns true, the user will be allowed to access the route, otherwise, the user will be redirected to a login or error page.

Note: You can also use the canActivateChild() method to protect child routes.