How do I handle errors with authentication guards in Angular CLI?

How do I handle errors with authentication guards in Angular CLI?

You can handle errors in authentication guards by implementing the canActivate method and using RxJS operators to catch errors.

Can you show me a code example of that?

Sure! Here's a simple example:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { catchError, of } from 'rxjs';

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

  canActivate() {
    return this.authService.isAuthenticated().pipe(
      catchError((error) => {
        console.error('Error occurred:', error);
        this.router.navigate(['/login']);
        return of(false);
      })
    );
  }
}

What if I want to show an error message to the user?

You can store the error message in a service and display it in your component. Modify the catchError to set the message before navigating.

Thanks! Is there a way to test the guard?

Yes! You can use Angular's testing utilities to create unit tests for your guard, ensuring it behaves as expected.