Angular의 인터셉터(인증, 캐싱, 로깅, 오류 처리)

Angular 인터셉터는 수행되는 모든 HTTP 요청을 가로채는 유일한 목적을 가진 특별한 종류의 HTTP 클라이언트 서비스일 뿐입니다. 이는 들어오는 HTTP 요청과 나가는 HTTP 요청 모두에 해당됩니다. 좋아, 나는 여러 곳에서 이 빠른 정의를 보았지만 정확히 무엇을 의미합니까? 어떻게 작동합니까?

응답이 백엔드에서 도착하면 인터셉터는 응답을 애플리케이션에 전달하기 전에 변환할 수 있습니다.

HTTP 인터셉터의 주요 이점 중 하나는 모든 요청에 ​​Authorization Header를 추가하는 것입니다. 이 작업을 수동으로 수행할 수 있지만 작업이 많고 오류가 발생하기 쉽습니다. 또 다른 이점은 요청에 의해 생성된 오류를 포착하고 기록하는 것입니다.

HTTP 인터셉터 생성

HttpInterceptor 인터페이스를 구현하는 Injectable 서비스를 생성하므로 Intercept 메서드를 구현해야 합니다.

@Injectable() export class DemoHttpInterceptor implements HttpInterceptor {
 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    //do whatever you want with the HttpRequest
    return next.handle(req);
}

그런 다음 루트 모듈에 클래스를 추가하십시오.

providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: DemoHttpInterceptor,
        multi: true
    }
],

Http 인터셉터를 사용한 기본 인증 예제

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { AuthState } from '../../store/auth.state';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(this.addAuthToken(request));
  }

  addAuthToken(request: HttpRequest<any>) {
    const token = this.authService.getAuthToken();

    return request.clone({
        setHeaders: {
          Authorization: `Basic ${token}`
        }
    })
  }
}