Como usar HttpInterceptors en Angular

Los interceptors en Angular nos brindan un mecanismo para interceptar y/o mutar las solicitudes y respuestas http. No debe confundirse con los Guards. Los interceptors modifican las peticiones del http module.

Aunque los interceptors son capaces de mutar solicitudes y respuestas, las propiedades HttpRequest y las HttpResponse son read-only, lo que las hace inmutables.

Disponible desde la versión 4.3 de Angular.

Los interceptors son capaces de intervenir las solicitudes de entrada y de salida, es decir lo que sale de tu app al servidor y lo que llega del servidor a tu app.

Múltiples Interceptores

Angular aplica los interceptors en el orden en que los proporcionas. Si proporciona los interceptors A, luego B y luego C, las solicitudes fluirán en A-> B-> C y las respuestas fluirán hacia fuera C-> B-> A.

Implementación

Para implementar un interceptor se necesita una clase inyectable que implemente “HttpInterceptor”. La clase debe definir un método “intercep”, el cual toma dos argumentos, req y next, y devuelve un observable de tipo HttpEvent.

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

@Injectable()
export class MyInterceptor implements HttpInterceptor {
    intercept(req : HttpRequest<any>, next : HttpHandler) : Observable<HttpEvent<any>> {
      const httpReq = req.clone({
        url: req.url.replace("http://", "https://")
      });
      return next.handle(httpReq);
    }
}

Los interceptors se ejecutan en cada petición que se realiza al servidor, para eso deben estar registrados. Para registrar un interceptor se tiene que proveer en el array de providers: [] en nuestro módulo raíz, por lo general AppModule.

Debemos importar HTTP_INTERCEPTORS y HttpClientModule, quedaría así:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MyInterceptor } from './interceptors/my.interceptor';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

La mayoría de los interceptors transforman la solicitud saliente antes de pasarla al siguiente interceptor de la cadena, llamando next.handle(transformedReq). Un interceptor también puede transformar el flujo de eventos de respuesta, aplicando operadores RxJS adicionales en el flujo devuelto por next.handle().

El método "intercept" intercepta y maneja un HttpRequest ó HttpResponse.

HttpRequest: Una solicitud HTTP saliente con un cuerpo con tipo opcional.

HttpResponse: Es un HttpEvent disponible en la secuencia de eventos de respuesta.

HttpHandler

Transforma una HttpRequest en una secuencia de HttpEvents, una de las cuales probablemente sea HttpResponse.

La instancia del controlador envía las solicitudes al primer interceptor de la cadena, que envía a la segunda, etc., y finalmente llega al HttpBackend.

HttpBackend: Es un HttpHandler final que enviará la solicitud a través de las API HTTP del navegador a un backend.

HttpEvent: Es un tipo de unión para todos los eventos posibles en el flujo de respuesta.

HTTP_INTERCEPTORS: Representa la matriz de HttpInterceptors que están registrados.

Ejemplos de uso

1. Autenticación
2. Añadir cabeceras extras a las peticiones.
3. Almacenar un log de las peticiones realizadas por la aplicación.
4. Loading Centralizado.
5. Manejador de Errores.
6. Notificaciones
7. Debug de las respuestas recibidas. etc...

Puedes encontrar mas ejemplos en este repositorio