What are the best practices for using guards and interceptors in Angular CLI?

What are the best practices for using guards and interceptors in Angular CLI?

When using guards and interceptors in Angular CLI, it's essential to keep your code modular and maintainable. Use route guards to protect routes based on user authentication and authorization. For interceptors, ensure they handle HTTP requests and responses efficiently, adding necessary headers or logging without affecting performance.

Can you give examples of how to implement route guards?

Sure! You can create a route guard by implementing the CanActivate interface. 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(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    }
    this.router.navigate(['/login']);
    return false;
  }
}

This guard checks if the user is logged in before allowing access to a route.

What about interceptors? How do they work?

Interceptors are used to modify HTTP requests and responses. You can create an interceptor by implementing the HttpInterceptor interface. Here's a simple example:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const cloned = req.clone({
      setHeaders: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
    });
    return next.handle(cloned);
  }
}

This interceptor adds an authorization token to every outgoing request.

Are there any performance considerations I should keep in mind?

Yes, when using guards and interceptors, be mindful of performance. Avoid heavy computations in guards, and keep interceptors lightweight to prevent slowing down HTTP requests. Use caching strategies where applicable and ensure that your guards and interceptors are only applied to necessary routes.