Nello script #206 abbiamo introdotto la classe HttpClient introdotta in Angular dalla versione 4.3. In questo script ci occupiamo di una nuova funzionalità introdotta da questa classe, cioè la possibilità di intercettare la richiesta prima che venga eseguita e dopo che è stata eseguita. Poter intercettare questi eventi ci permette di eseguire operazioni comuni senza doverle ripetere per ogni chiamata.

Ad esempio, capita molto spesso di dover aggiungere un header di sicurezza alle nostre chiamate HTTP. Aggiungere questo header ogni volta che si fa una chiamata porta a una duplicazione di codice con un'alta possibilità di commettere errori. Con un interceptor possiamo intercettare la richiesta prima che venga inviata al server e aggiungere un header contenente il token per autenticare la chiamata.

Un interceptor è una classe che implementa l'interfaccia HttpInterceptor (esportata dal file @angular/common/http). Questa interfaccia impone l'implementazione del metodo intercept.

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

@Injectable()
export class SecurityInterceptor implements HttpInterceptor {
    constructor() {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const correctReq = req.clone({ headers: req.headers.set('authorization', 
          `bearer ${sessionStorage.getItem('token')}`) });
        return next.handle(correctReq);
    }
}

Il metodo intercept accetta in input la richiesta HTTP, e un'istanza del prossimo handler che deve esaminare la richiesta prima di inviarla al server. In questo caso, cloniamo la richiesta originale e ci aggiungiamo un header authorization impostandone il valore con un token proveniente dal sessionStorage. Una volta fatto questo invochiamo l'handler successivo passando in input la richiesta che abbiamo clonato e modificato.

Una volta fatto questo dobbiamo aggiungere l'interceptor alla lista degli interceptor. Questo lo facciamo nella sezione providers del decorator NgModule applicato al nostro modulo.

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
...

@NgModule({
  ...,
  imports: [
    ...,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: SecurityInterceptor, multi: true },
  ]
})
export class MyModule { }

HTTP_INTERCEPTORS rappresenta l'array di interceptor al quale andiamo ad aggiungere il nostro interceptor. E' importante ricordare che per utilizzare HttpClient e HTTP_INTERCEPTORS, dobbiamo importare nel nostro modulo, il modulo HttpClientModule.