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.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Generare token per autenicarsi sulle API di GitHub
Usare le collection expression per inizializzare una lista di oggetti in C#
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Creare form tipizzati con Angular
Eseguire le GitHub Actions offline
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Eseguire query verso tipi non mappati in Entity Framework Core
Le novità di Angular: i miglioramenti alla CLI
C# 12: Cosa c'è di nuovo e interessante
Reactive form tipizzati con modellazione del FormBuilder in Angular
Verificare la provenienza di un commit tramite le GitHub Actions
Recuperare un elemento inserito nella cache del browser tramite API JavaScript