¿Qué es un interceptor en Angular?

Un interceptor en Angular es una clase que se utiliza para interceptar solicitudes HTTP y respuestas HTTP.

Los interceptores se pueden utilizar para realizar tareas como añadir un encabezado de autorización a todas las solicitudes, manejar errores de servidor de manera uniforme o agregar una barra de carga a la aplicación mientras se realizan solicitudes.

Para utilizar un interceptor, primero debe crear una clase que implemente la interfaz HttpInterceptor. Esta interfaz define un método intercept, que se ejecuta cada vez que se realiza una solicitud o se recibe una respuesta. En este método, puede realizar cualquier acción necesaria antes o después de la solicitud o la respuesta, como modificar encabezados o manejar errores.

Una vez que ha creado su interceptor, debe registrarlo en el inyector de dependencias de Angular mediante el método HTTP_INTERCEPTORS de la clase HttpClientModule.

Aquí hay un ejemplo de cómo crear un interceptor para añadir un encabezado de autorización a todas las solicitudes:

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>> {
    // Clone the request and set the new header in one step.
    const authReq = req.clone({headers: req.headers.set('Authorization', 'my-auth-token')});

    // send the newly created request
    return next.handle(authReq);
  }
}

Luego, puede registrar el interceptor en su módulo de aplicación mediante el siguiente código:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth-interceptor';

@NgModule({
  // ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}