Securing Child Routes in Angular: A Deep Dive into CanActivateChild

What is CanActivateChild?

CanActivateChild is a route guard in Angular that determines whether a child route of a particular route can be accessed. It's specifically designed for guarding routes that are nested under a parent route. This makes it highly useful when you have a module with child routes that should only be accessible under certain conditions, like user authentication or specific roles.

Why Use CanActivateChild Instead of CanActivate?

At first glance, you might wonder, "Why not just use CanActivate on the child routes themselves?" While you can use CanActivate to protect child routes individually, CanActivateChild provides a more scalable and cleaner approach, especially when:

• You have multiple child routes and want to apply the same logic to all of them.

• You want to ensure that access is controlled at a higher level, from the parent route down to the children.

Setting Up CanActivateChild Guard

Step 1: Create the Guard

ng generate guard auth/child-route

Step 2: Implement the Guard Logic

import { Injectable } from '@angular/core';
import { CanActivateChild, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
 providedIn: 'root',
})
export class ChildRouteGuard implements CanActivateChild {
 constructor(private authService: AuthService, private router: Router) {}

 canActivateChild(
  childRoute: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
 ): boolean {
  const isAuthenticated = this.authService.isAuthenticated();

  if (!isAuthenticated) {
   this.router.navigate(['/login']);
   return false;
  }
  return true;
 }
}

Here’s what’s happening in this example:

• The guard implements the CanActivateChild interface.

• It checks if the user is authenticated by calling the AuthService.

• If the user is not authenticated, it redirects them to the login page and returns false, blocking access to the child route.

Step 3: Applying the CanActivateChild Guard to Routes

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './child/child.component';
import { ChildRouteGuard } from './auth/child-route.guard';

const routes: Routes = [
 {
  path: 'parent',
  component: ParentComponent,
  canActivateChild: [ChildRouteGuard], // Apply the guard here
  children: [
   { path: 'child1', component: ChildComponent },
   { path: 'child2', component: ChildComponent },
  ],
 },
];

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

Step 4: Testing the Guard

Now, when a user attempts to access any child route of /parent, Angular will invoke the ChildRouteGuard. If the user is authenticated, they can proceed; otherwise, they’ll be redirected to the login page.

Real-World Use Cases for CanActivateChild

• Role-Based Access Control: If your application has different user roles (e.g., Admin, Editor, User), CanActivateChild can be used to control access to child routes based on roles. For instance, only users with an Admin role may access certain child routes.

• Subscription-Based Access: If your app offers premium features, CanActivateChild can be used to restrict access to premium features nested under a parent route.

• Session Expiry: You can also check whether the user’s session is active before allowing them to navigate to child routes, ensuring they don’t access sensitive parts of your application if they’ve been idle for too long.

Advantages of Using CanActivateChild

• Cleaner Code: Instead of applying the same CanActivate guard on each child route individually, you can apply CanActivateChild once at the parent level.

• Scalability: When new child routes are added, they will automatically inherit the parent guard, reducing maintenance.

• Centralized Access Control: Having access logic in one place (the parent route) makes it easier to manage route protection across an entire section of your app.