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
Utilizzare Tailwind CSS all'interno di React: primi componenti
Reactive form tipizzati con FormBuilder in Angular
.NET Conference Italia 2023
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Usare una container image come runner di GitHub Actions
Load test di ASP.NET Core con k6
Disabilitare automaticamente un workflow di GitHub (parte 2)
Miglioramenti agli screen reader e al contrasto in Angular
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Creare form tipizzati con Angular
Utilizzare i primary constructor di C# per inizializzare le proprietà
Gestire errori funzionali tramite exception in ASP.NET Core Web API