Http Interceptor 다루기

http interceptor 란 말 그대로 http 통신시 사용자의 요청을 가로채는 역할을 합니다.
특정 서버와 통신을 할때 반복적으로 처리해야 하는 구문(auth 인증이라던지 에러처리라던지...)을 interceptor를 이용하면 코드를 짧게 가져갈 수 있습니다.

Authorization 처리하기

아래 소스는 post시 사용자 토큰값을 header에 담아 보내는 방식이다.

public post(url: string, headers: any): Promise<any> {
  headers.Authorization = 'Bearer ' + this.userToken();
  return new Promise(resolve => {
    this.http.post({url, headers}).then((res) => {
      resolve(res.body);
    });
  });
}

위처럼 매번 header에 Bearer 을 보내야 하는 번거러움이 있다.

Http Interceptor 구현하기

interceptor.ts

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

@Injectable()
export class BearerTokenInterceptor implements HttpInterceptor {

  constructor(
  ) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = 'User Token';
    // const isApiUrl = req.url.startsWith('API Url'); // url 이 특정 문자로 시작되는 지 확인

    
    let request: HttpRequest<any> = req.clone({ // header에 정보 추가시
      setHeaders: { Authorization: `Bearer ${token}` }
    });

    return next.handle(request).pipe( // 에러처리시
      catchError(e => {
        // console.error(e.error.error.message)
        return throwError(e)
      })
    );
  }
}

app.module.ts

위에서 만들어진 BearerTokenInterceptor 를 providers에 useClass로 정의하고
multi: true 로 정의하면 BearerTokenInterceptor 을 전역으로 서비스 가능합니다.

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BearerTokenInterceptor } from './interceptor';

@NgModule({
  ..........
  imports: [
    ..........
    HttpClientModule,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: BearerTokenInterceptor, multi: true },
  ]
})

위와 같이 설정하면 this.http.post 호출시 자동으로 Authorization 이 들어가게 됩니다.