Angular HTTP Interceptors: Ce sunt și cum se folosesc

  • 2 minute de citit
  • 5 exemple de cod
  • 1 imagine

Disponibil și în English

Fotografie de Tyler Milligan de pe Unsplash Salut,

În acest articol scurt voi încerca să explic ce este un HTTP interceptor și cum se folosește. Articolul meu se bazează pe documentația oficială Angular, pe care o recomand cu căldură, o găsești aici: intercepting-requests-and-responses.

Dacă te întrebi, conținutul acestui articol este valabil pentru Angular 2, 4 și 6, care acum se numește doar Angular. AngularJS este versiunea veche, adică versiunea 1.0

Poți folosi HTTP interceptors pentru a seta header-e (de exemplu JWT), pentru a redirecționa la erori de răspuns și altele, acestea te vor ajuta să eviți multe duplicări de cod. Nu voi intra în detalii despre cum se creează un proiect Angular; în schimb, vei găsi codul complet într-un repo pe Github, așa că nu ezita să continui cu acest articol și să te uiți la codul complet după aceea.

Scrierea unui HTTP interceptor este foarte simplă, tot ce trebuie să faci este să urmezi pașii de mai jos:

  1. Creează o clasă care implementează HttpInterceptor și apoi decorează-o cu @Injectable
  2. Furnizează (provide) interceptorul.

Dacă ești dezvoltator Angular, știi deja cum se furnizează serviciile, există însă o capcană, în cazul HttpInterceptors trebuie să îl furnizezi în AppModule.

Se face de obicei așa:

{ provide: <a href="https://angular.io/api/common/http/HTTP_INTERCEPTORS" rel="noopener" target="_blank">HTTP_INTERCEPTORS</a>, useClass: NoopInterceptor, multi: true }

Este o bună practică să urmezi instrucțiunile din documentația oficială și să creezi un array nou în care să pui toți interceptorii, astfel încât trebuie doar să adaugi interceptori noi în array și apoi să furnizezi array-ul în rădăcina AppModule.

Modul în care funcționează interceptorii este că se uită la cerere și apoi apelează next pe ea. Următorul interceptor este un interceptor no operation, adică nu face nimic.

intercept(<strong>req</strong>: HttpRequest, next: HttpHandler):    Observable {    return next.handle(req);  }

Din câte știu, nu poți configura interceptorii să se activeze doar în anumite condiții; dacă tu știi cum, te rog spune-mi. Modul în care ai configura un interceptor să se activeze doar pentru anumite rute este să inspectezi parametrul req, după cum se vede în acest exemplu:

/** Simulează un răspuns de la server pentru cererea de upload a unui fișier */<a href="http://twitter.com/Injectable" rel="noopener" target="_blank" title="Twitter profile for @Injectable">@Injectable</a>()export class UploadInterceptor implements HttpInterceptor {  intercept(req: HttpRequest, next: HttpHandler): Observable {    if (<strong>req.url.indexOf('/upload/file'</strong>) === -1) {      return next.handle(req); // nu face nimic    }    const delay = 300;    // Creează un flux simulat de evenimente de upload    return createUploadEvents(delay);  }}

Preluat din upload-interceptor.ts

Dacă ai o aplicație care folosește JWT ca metodă de autentificare, poți scrie un HTTP interceptor care setează header-ul JWT dacă este disponibil; în metoda intercept ai face ceva de genul următorului pseudocod:

token = this.auth.getToken() // auth este furnizat prin constructor.
if (token) {    req.setHeader('Authorization', 'Bearer ' + token)}return next.handle(req);

Codul complet se găsește aici:

Dacă îți plac lucrurile pe care le scriu, nu ezita să mă urmărești pe Twitter și pe Medium.