[angular] 인터셉터 구성

26 Dec 2023

angular

Angular 애플리케이션에서 인터셉터(interceptor)는 HTTP 요청이나 응답을 가로채고 변형할 수 있는 중요한 기능을 제공합니다. 인터셉터를 구성하여 토큰 인증이나 로깅과 같은 작업을 처리할 수 있습니다.

인터셉터 생성

Angular CLI를 사용하여 새로운 인터셉터를 생성합니다.

ng generate interceptor logging

이 명령어를 실행하면 logging.interceptor.ts 파일이 생성됩니다. 이 파일은 HTTP 요청 및 응답을 가로챌 수 있는 기본적인 구조를 갖고 있습니다.

인터셉터 구성

생성된 인터셉터 파일에는 intercept 메서드가 포함되어 있습니다. 이 메서드를 사용하여 HTTP 요청이나 응답을 가로채고 처리할 수 있습니다.

다음은 인터셉터를 사용하여 모든 HTTP 요청에 대해 인증 토큰을 추가하는 예제입니다.

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 인증 토큰을 요청 헤더에 추가
    const authToken = 'Bearer ' + this.authService.getAuthToken();
    const authReq = req.clone({
      setHeaders: {
        Authorization: authToken
      }
    });
    // 변형된 요청을 다음 핸들러로 전달
    return next.handle(authReq);
  }
}

인터셉터 등록

애플리케이션 모듈에서 생성한 인터셉터를 등록해야 합니다.

import { HTTP_INTERCEPTORS } from '@angular/common/http';

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

위 코드에서 HTTP_INTERCEPTORS를 이용하여 인터셉터를 등록하고, multi: true 옵션을 추가하여 여러 인터셉터를 등록할 수 있게 합니다.

마치며

이제 인터셉터를 통해 HTTP 요청이나 응답을 가로채고 처리할 수 있게 되었습니다. 이를 활용하여 애플리케이션에서 필요한 작업들을 보다 효율적으로 처리할 수 있습니다.

참고문헌: Angular 공식 문서