Implementing Nested Routes and Route Guards in Angular

Introduction:

Angular’s routing system allows you to create complex navigation structures with nested routes. Additionally, route guards provide a way to protect routes based on certain conditions. In this blog post, we will explore how to implement nested routes and route guards in Angular applications, providing secure and structured navigation. We will dive into the concepts and demonstrate their implementation through practical examples.

If you want to learn about a new feature of angular, you can refer here.

1. Setting Up Nested Routes:

Angular allows you to define child routes within parent routes, creating a hierarchical structure for your application’s navigation. Let’s see how to set up nested route in Angular:

Step 1: Define Parent Route Configuration:

In your routing module, define the parent route that will contain the child route. For example:

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component },
      // More child routes...
    ]
  },
  // Other top-level routes...
];

Step 2: Configure Router Outlet:

In the parent component’s template, add a <router-outlet></router-outlet> element to render the child components. For example:

<!-- parent.component.html -->
<h1>Parent Component</h1>
<router-outlet></router-outlet>

Implementing Route Guards:

Route guards provide a way to control access to route based on certain conditions, such as user authentication or authorization. Angular provides several types of route guards. Let’s look at implementing a simple example of an authentication guard:

Step 1: Create AuthGuard Service:

Create an AuthGuard service that implements the CanActivate interface and defines the logic for allowing or denying access to a route. For example:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, 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(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Step 2: Add Route Guard to Route Configuration:

In your route configuration, specify the route guard for the desired route. For example:

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AuthGuard]
  },
  // Other routes...
];

Step 3: Protect the Route:

Specify the protected route in your application, and when the guard condition is not met, the user will be redirected to the specified route (e.g., login page).

Combining Nested Routes and Route Guards:

You can combine nested routes and route guards to create protected sections within your application. Here’s an example that demonstrates a nested route with a route guard:

const routes: Routes = [
  {
    path: 'admin',
    canActivate: [AuthGuard],
    children: [
      { path: '', component: AdminDashboardComponent },
      { path: 'users', component: UsersComponent },
      { path: 'settings', component: SettingsComponent },
      // More child routes...
    ]
  },
  // Other routes...
];

In this example, the AuthGuard is applied to the parent route ‘admin’, which means all child routes will be protected and accessible only to authenticated users.

Conclusion:

Implementing nested routes and route guards in Angular provides a powerful way to structure and secure your application’s navigation. By following the steps outlined in this blog post, you can create complex navigation structures with nested routes and add route guards to protect specific routes. This ensures a secure and controlled user experience. Leverage the power of Angular’s routing system and route guards to build robust and secure Angular applications. Happy coding!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.