How do I implement authentication guards in Angular using Angular CLI?

How do I implement authentication guards in Angular using Angular CLI?

To implement authentication guards in Angular, you can create a guard using the Angular CLI with the command: ng generate guard auth. This will create a guard file where you can define your authentication logic.

What methods do I need to implement in the guard?

You need to implement the canActivate method, which checks if the user is authenticated before allowing access to a route.

Can you show me an example of the canActivate method?

Sure! Here's a simple example:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  const isAuthenticated = this.authService.isLoggedIn();
  if (!isAuthenticated) {
    this.router.navigate(['/login']);
  }
  return isAuthenticated;
}

How do I protect a route using this guard?

You can protect a route by adding the guard to your route configuration in the app-routing.module.ts file like this:

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }