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:
- Kérések módosítása: Például hitelesítési fejléc hozzáadása minden kéréshez.
- Válaszok kezelése: Például globális hibakezelés vagy válaszadatok transzformálása.
- 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.