How can I implement advanced routing guards in Angular CLI?

How can I implement advanced routing guards in Angular CLI?

To implement advanced routing guards in Angular CLI, you can create custom guards using the CanActivate interface. This allows you to control access to routes based on specific conditions.

Can you show me an example of a custom CanActivate guard?

Sure! Here's a simple example:

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

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    const isLoggedIn = // your logic to check if user is logged in;
    if (!isLoggedIn) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

This guard checks if the user is logged in and redirects to the login page if not.

What other types of guards can I use in Angular?

In Angular, you can use several types of guards:

1. CanActivate: Checks if a route can be activated.
2. CanDeactivate: Checks if a route can be deactivated.
3. Resolve: Pre-fetches data before the route is activated.
4. CanLoad: Checks if a module can be loaded.

How do I apply these guards to my routes?

You can apply guards to your routes in the routing module like this:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'settings', component: SettingsComponent, canDeactivate: [CanDeactivateGuard] },
];

Just add the guard to the canActivate or canDeactivate property of the route.