[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() export class TokenCheckInterceptor implements HttpInte