라벨이 [typescript]인 게시물 표시

[Angular] HttpInterceptor를 사용하여 Token 만료 검증하기

안녕하세요. 남산돈가스입니다.
이번 포스팅에서는 Angular 프로젝트 환경에서 API를 요청하실 경우, 가장 보편적으로 사용하시는 HttpClientModule에서 Http 요청을 가로채 특정 처리를 할 수 있도록 도와주는 HttpInterceptor 인터페이스에 대해서 작성해보겠습니다.

우선 HttpInterceptor는 Angular 4.3부터 추가 된 기능으로,
위에서 말한 것처럼, HttpClientModule을 이용한 API 호출 시 그 중간의 요청을 가로채어 특정 처리를 진행할 경우에 사용합니다.

저희 팀에서 Angular를 진행하는 프로젝트에서는 이 Interceptor를 API 호출 시 OAuth Token을 만료인지 유효한 지 검증하기 위한 용도로 사용되고 있습니다.

이번 포스팅에서 예제로 설명할 상황은 이렇습니다.

1. LocalStorage에 저장 된 OAuth Token을 가져온다.

2. OAuth Token을 요구하는 API를 HttpClient 모듈을 이용하여 호출한다.

3. HttpInterceptor에서 API  결과 응답이 Error이며, 401에러인 경우를 확인한다.

4. 상황이 3 과 같은 경우, 토큰 갱신 API를 호출한다.

5. 토큰 갱신 이후 정상 토큰을 가지고 위에서 호출해야하는 API 다시 요청한다.

6. 정상 응답을 확인한다.

예제 코드를 보면서 설명하겠습니다.


import {Injectable} from '@angular/core'; import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http'; import {Observable} from 'rxjs'; @Injectable() exportclass TokenCheckInterceptor implements HttpInterceptor { intercept(req: HttpRequ…