Interceptor

Bejövő – kimenő HTTP request-ek módosításához használják

Az Angular interceptor egy közbeiktatott feldolgozó, amely lehetővé teszi a bejövő vagy kimenő HTTP-kérések módosítását, vizsgálatát vagy kezelését az Angular alkalmazásokban. Az interceptorokat gyakran hitelesítéshez, naplózáshoz vagy különféle kéréseken átmenő adatok módosításához használják. Az Angular HttpClient moduljában implementált interceptorok egy láncolatot képezhetnek, ahol minden interceptor sorban kezeli a kérést vagy a választ.

Az interceptor lehetővé teszi egy adott művelet módosítását anélkül, hogy a műveletet végrehajtó eredeti kódhoz hozzá kellene nyúlni.

Ebben az összefüggésben az Angularban az interceptorokat gyakran használják a HTTP kérések és válaszok módosításához vagy kezeléséhoz. Az @angular/common/http modulon belül az HttpInterceptor interfészt használva hozhatunk létre saját interceptorokat.

Az interceptorok általában a következőképpen használhatók:

1. Kérések módosítása: Például hitelesítési fejléc hozzáadása minden kéréshez.
2. Válaszok kezelése: Például globális hibakezelés vagy válaszadatok transzformálása.
3. Caching: Kérési válaszok tárolása és azok újbóli felhasználása.

Egy egyszerű interceptor példa, amely hozzáad egy “Authorization” fejlécet minden kéréshez:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer SOME_TOKEN')
    });

    return next.handle(authReq);
  }
}

Ezután az interceptorunkat be kell állítani az HTTP_INTERCEPTORS token alatt az app moduljában:

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}

Az multi: true beállítás lehetővé teszi, hogy több interceptorunk is legyen, és egymás után futtassuk őket a kérések során.

Ez csak egy alapvető példa az interceptorok használatára az Angularban. A valós alkalmazásokban az interceptorok lehetnek sokkal összetettebbek és számos egyéb funkcióval is rendelkezhetnek.