Angular HTTP Interceptor

Published on Wed Mar 20 2019 09:20:00 GMT+0000 (Coordinated Universal Time) by Valerio Como

Angular HTTP Interceptor

Come intercettare richieste e risposte HTTP

Angular è un framework in costante evoluzione e, con ogni versione rilasciata, nuove feature sono messe a disposizione degli sviluppatori.

Sin dagli albori, come ogni web framework, Angular ha un package per la gestione delle richieste Http. La versione 4.3 ha introdotto il package HttpClient, deprecando Http. Con HttpClient sono stati introdotti gli HTTP Interceptor, che consentonodi intercettare le response e le request delle chiamate HTTP effettuate dalla Single Page Application. Il funzionamento di un interceptor è del tutto comparabile ad un route middleware di un qualsiasi web framework, come Slim oppure Express.

Creare un Interceptor

Per creare un interceptor in Angular è necessario definire un servizio che implementa l’interfaccia HttpInterceptor, importandola da @angular/common/http. La classe implementerà il metodo intercept, che verrà invocato per intercettare una richiesta o una risposta HTTP.

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

export class FakeInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler)  
              :Observable<HttpEvent<any>> {

               console.log(new Date());  
               return next.handle(req);     
           }  
}

L’interceptor definito nell’esempio è banale e si occuperà di stampare a console la data della intercettazione.

All’interno di una applicazione è possibile definire molteplici interceptor, che verranno chiamati in successione.

Il metodo intercept

Il metodo intercept ha due parametri in ingresso.

Il primo parametro è un oggetto che modella la richiesta HTTP e implementa l’interfaccia HttpRequest. Tramite questo oggetto è possibile effettuare manipolazioni della richiesta, ma attenzione! L’oggetto della richiesta è immutabile. Manipolare la richiesta significa, sostanzialmente, creare un clone e apportare le modifiche del caso su di esso.

Il secondo parametro implementa l’interfaccia HttpHandler, la quale definisce il metodo handle. Esso ha in input una HttpRequest e restituisce un observable. La chiamata ad handle continua la catena di interceptor, passando il controllo al prossimo.

Providing di un interceptor

Come per ogni altro servizio in Angular, é necessario definire un provider per gli interceptor. Il developer deve effettuare il providing degli interceptor nello stesso injector (o in un padre dell’injector) che fa da provider per HttpClient.

Un esempio di providing è il seguente:

{   
    provide: HTTP_INTERCEPTORS,   
    useClass: FakeInterceptor,   
    multi: true   
}

L’oggetto che definisce il provider ha tre proprietà:

provide è avvalorato con HTTP_INTERCEPTORS, importato da @angular/common/http.
useClass indica il nome della classe da istanziare.
multi, quando ha valore true, indica al sistema di Dependency Injection che il token HTTP_INTERCEPTORS è un multiprovider, ovvero effettua l’injection di un array di istanze.