CanActivate Guard in Angular

The CanActivate guard in Angular is used to control access to routes. It prevents unauthorized users from accessing certain routes. This tutorial covers the basics of setting up and using the CanActivate guard effectively in your Angular applications.

Setting Up CanActivate Guard

To set up the CanActivate guard, you need to create a guard service and implement the CanActivate interface:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';
import { AuthGuard } from './auth.guard';

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

@NgModule({
  declarations: [AppComponent, HomeComponent, AdminComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

// auth.guard.ts
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 {
    const isAuthenticated = false; // Replace with actual authentication check
    if (isAuthenticated) {
      return true;
    } else {
      this.router.navigate(['/']);
      return false;
    }
  }
}

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '
Home Component
',
})
export class HomeComponent { }

// admin.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-admin',
  template: '
Admin Component
',
})
export class AdminComponent { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

// app.component.html

Creating a Guard Service

Create a guard service using the Angular CLI command ng generate guard auth and implement the CanActivate interface:

// auth.guard.ts
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 {
    const isAuthenticated = false; // Replace with actual authentication check
    if (isAuthenticated) {
      return true;
    } else {
      this.router.navigate(['/']);
      return false;
    }
  }
}

Using the CanActivate Guard

Use the canActivate property in your route configuration to protect the routes:

// app.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
];

Key Points

Conclusion

The CanActivate guard in Angular provides a powerful way to control access to certain routes in your applications. By understanding and using the CanActivate guard effectively, you can create secure and user-friendly applications with protected routes. Happy coding!