HTTP interceptor란 무엇인가요?

Question

Accepted Answer

**HTTP interceptor**는 모든 `HttpClient` 요청/응답의 중간에 위치하여, 이를 전역적으로 검사하고 변환할 수 있게 합니다. 모든 요청에 적용되는 **횡단 관심사**(인증 토큰, 로깅, 에러 처리, 로딩 표시기)를 위한 완벽한 장소입니다.

## 함수형 interceptor (최신 Angular)

```ts
import { HttpInterceptorFn } from "@angular/common/http";
import { inject } from "@angular/core";

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();

// 요청은 불변이다 — 수정하려면 CLONE
  const authReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }, // 모든 요청에 토큰 첨부
  });

return next(authReq); // (수정된) 요청을 체인을 따라 전달
};
```

interceptor는 요청과 `next` 함수(다음 핸들러)를 받습니다. 결정적으로, 요청은 **불변**이므로 변경하려면 변형 대신 `.clone()`을 사용합니다. 이를 한 번 등록하면 모든 나가는 요청이 자동으로 인증 헤더를 지니게 되어, 각 서비스에서 반복할 필요가 없습니다.

## interceptor 등록하기

```ts
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor, loggingInterceptor])),
  ],
});
```

여러 interceptor가 **체인**을 형성하여 각각 다음으로 전달합니다. 순서가 중요합니다.

## 응답과 에러를 전역적으로 처리하기

```ts
import { catchError } from "rxjs/operators";
import { throwError } from "rxjs";

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err) => {
      if (err.status === 401) inject(Router).navigate(["/login"]); // 전역 401 처리
      inject(NotificationService).showError(err.message);
      return throwError(() => err);
    })
  );
```

interceptor는 응답 Observable도 감싸므로, 전체 앱에 대해 **한 곳에서** 에러를 처리할 수 있습니다(예: 401 시 리디렉션, 토스트 표시).

## 일반적인 interceptor 용도

```text
✓ 요청에 인증 토큰 첨부
✓ 전역 에러 처리 (401 → 로그인, 알림 표시)
✓ 모든 HTTP 트래픽의 로깅 / 분석
✓ 전역 로딩 스피너 표시/숨김
✓ 공통 헤더 추가, 재시도 로직, 캐싱
```

## 왜 중요한가

interceptor는 모든 HTTP 호출에 걸쳐 중복될 로직을 중앙집중화합니다. 가장 중요하게는 인증 토큰을 첨부하고 에러를 전역적으로 처리합니다.

이로써 서비스는 깔끔하게 유지되고(단지 요청만 보냄), 앱 전체에 일관된 동작을 보장합니다.

인증 토큰과 전역 에러 interceptor는 프로덕션 Angular 앱에서 거의 보편적입니다. 수정하려면 clone하는 규칙과 체인 모델을 아는 것이 이들을 올바르게 작성하는 핵심입니다.