Route Guards in Angular

Route guards in Angular allow you to control access to certain routes in your application. This tutorial covers the basics of setting up and using route guards effectively in your Angular applications.

Setting Up Route Guards

To set up route guards, you need to create a guard service and implement the necessary guard interfaces:

// 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 Guard Service

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

Route guards in Angular provide a powerful way to control access to certain routes in your applications. By understanding and using route guards effectively, you can create secure and user-friendly applications with protected routes. Happy coding!