¿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 {}

Las ventajas que obtenemos al usar interceptores son:

  1. Los interceptores le permiten centralizar la lógica de manipulación de solicitudes y respuestas HTTP en un solo lugar, lo que hace que su código sea más fácil de mantener y depurar.
  2. Los interceptores le permiten modificar solicitudes y respuestas de manera uniforme y consistente sin tener que agregar código adicional a cada componente o servicio que realiza solicitudes HTTP.
  3. Los interceptores le permiten realizar tareas comunes como añadir encabezados de autorización a todas las solicitudes o manejar errores de servidor de manera uniforme en toda la aplicación.
  4. Los interceptores le permiten agregar funcionalidad adicional a la aplicación, como una barra de carga mientras se realizan solicitudes o una pantalla de inicio de sesión para proteger ciertas rutas.

En resumen, los interceptores son una herramienta muy útil en Angular para manipular solicitudes y respuestas HTTP de manera centralizada y consistente en toda la aplicación.