[번역] AngularJS의 Interceptor와 유용한 예제들

Interceptors in AngularJS and Useful Examples) 을 번역한 글 입니다.

 

AngularJS의 ‘$http’ 서비스는 서버와 통신할 때 사용되고, HTTP request를 만들때 사용된다. 우리가 서버에 request를 보내기 전에 조작하고 싶어하는 이유는 다양하다.  서버로부터 정보를 받아온 뒤에 처리하고 싶은 이유도 다양하다. 전역 http 에러 핸들링은 좋은 예시가 될 것 같다. 이 글에서는 AngularJS의 Interceptor를 소개하고, 예제 몇가지도 수록 할 예정이다.

Interceptor?

$httpProvider는 Interceptor들로 이루어진 배열을 가지고 있다. Interceptor는 단순히 그 배열에 등록된 Factory에 불과하다. Interceptor를 어떻게 선언하는지는 다음을 보자 :

Interceptor 선언

Interceptor의 이름을 $httpProvider.interceptors 배열에 넣어 보자:

$httpProvider.interceptors에 추가하기

 

Interceptors 는 다음과 같은 일들을 할 수 있게 해준다:

  • request function을 implement 하여 requestIntercept: 이 함수는 $http 가 backend로 보내지기 전에 불러와지기 때문에, 우리는 $http 의 설정을 수정하거나 다른 action을 추가 할 수 있다. 이 함수는 request configuration 객체를 파라미터로 받고, request configuration 객체나 object 형식을 return 한다. 유효하지 않은 request configuration 객체나 promise를 return 하는것은 불가능하며 , $http 호출은 실패될 것이다.
  • response function을 implement 하여 request Intercept: 이 함수는 $http 가 backend로 부터 결과를 수신한 직후에 불러와지기 때문에, 우리는 response를 수정하거나 다른 action을 추가 할 수 있다. 이 함수는 response 객체를 파라미터로 받고, response 객체나 promise를 return 한다. response 객체는 backend로 부터 받은 request configuration, headers, status, data를 포함하고 있다. 유효하지 않은 response configuration 객체나 promise를 return 하는것은 불가능하며 , $http 호출은 실패될 것이다.
  • requestError function을 implement 하여 request Intercept: 때때로 requset는 보내지지 못했거나 interceptor로 부터 reject 당하기도 한다. request error interceptor는 이전의 request interceptor가 취소한 request를 확인한다.이건 request를 복구하는데 사용하거나 request를 보내기 전에 수정한 것들 (예를들면, overlay들이나 indicator 로딩, 버튼과 필드 enable하게 변경)을 되돌리는데 (undo) 사용된다.
  • responseError function을 implement 하여 request Intercept: 때때로 우리가 backend 로 보낸 요청은 실패한다. request interceptor나 이전의 response interceptor 가 요청을 거부할 수도 있다. 이런 경우에, response error interceptor가 backend 호출을 복구하는데 도움을 줄 수 있다.

Asynchronous Operations

interceptor 내부에 비동기적인 operation을 만들 필요가 있을 때도 있다. 운이 좋게도, AngularJS에서는 promise를 return 해놓고, 나중에 resolve 할 수 있다. 이 방법을 쓰면 (request interceptor의 경우) request 보내는 것을 연기하거나, (response interceptor의 경우) response resolve 하는 것을 연기 할 수 있다.

request interceptor 내부에 비동기 operation 만들기

 

이 예시에서, request interceptor는 비동기 operation을 만들고 result에 따라 config를 수정하였다. 만약 deffered가 reject 된 경우에는, http request는 실패처리된다.
같은 것을 response interceptor 에도 적용시켜 보자:

response interceptor 내부에 비동기 operation 만들기

 

deferred가 reseloved 될 때만 request 가 성공한다. 만약 deferred가 실패하면, request도 실패할 것이다.

Examples

이 부분에서 나는 AngularJS Interceptor의 예시들을 보여줄건데, 이걸 보고 여러분들이 어떻게 Interceptor를 사용해야 하는지 이해하게 되는 기회가 되기를 바란다. 여기 적어놓은 예시들이 최고이거나 제일 정확한 솔루션이 아님을 명심하고 보았으면 좋겠다.

Session Injector (request interceptor)

서버 사이즈 인증을 구현하는데는 두가지 방법이 있다. 첫번째 방법은 쿠키를 사용하여 모든 요청에 대하여 사용자 인증을 하는 전통적인 쿠키 기반 인증 (Traditional Cookie-Based Authentication ) 이다.  다른 방식으로는 토큰 기반 인증(Token-Based Authentication) 이 있다. 토큰 기반 인증에서는, 사용자가 로그인 하면 서버로부터 sessionToken을 받게 된다. 이 sessionToken은 서버가 요청을 보내는 사용자들을 서로 구분할 수 있게 해준다. 아래의 sessionInjector는 유저가 로그인 되어 있는 경우,  x-session-token 헤더를 각각의 request에 추가시켜 준다:

Session Injector

 

한번 새로운 get request 를 만들어 보자:

Creating a request

 

sessionInjector 한테 인터셉트 당하기 전 configuration object:

Before interceptor

 

sessionInjector 한테 인터셉트 당한 후의 configuration object:

After interceptor

 

Timestamp Marker (request and response interceptors)

Interceptor를 사용하여 backend에서 response할 때까지 걸린 시간을 측정해보자. 매 request와 response 마다 timestamp를 넣어줘서 구현한다:

Timestamp Marker

 

그리고 이런식으로:

Timestamp Marker usage

 

여기에서도 Timestamp Marker 예제를 볼 수 있다

Request Recover (request error interceptor)

request error interceptor를 사용하기 위해서 우리는 이전 interceptor 가 request를 reject한 상황을 시뮬레이션 해야 한다. 우리의 request error interceptor는 reject 사유를 받고, request를 복구 할 것이다. 

requestRejector와 requestRecover, 두개의 interceptor를 만들어보자.

Request Recoverer

 

여기까지 됬으면, 우리는 requestRejector가 request를 reject했어도 success log를 받을 것이다.

Request Recoverer example

 

여기서 Request Recover 예제를 볼 수 있다.

Session Recoverer (response error interceptor)

SPA (Single-page-application) 에서, 간혹가다가 session이 유실될 때 가 있다. 이런 상황은 session이 만료되거나 서버 에러때문에 생긴다. 이런 상황에서 세션을 복구해주고 request를 다시 보내주는 interceptor를 한번 만들어보자. (session 만료된 상황을 가정했다.)
예제의 목적상, http status code는 세션 만료인 419로 가정한다.

Session Recoverer

 

이렇게 하면, backend 호출이 세션 만료때문에 실패하더라도, sessionRecoverer가 새로운 session을 만들고, backend를 다시 호출 할 것이다.

Summary

이 문서는 AngularJS의 interceptor에 대해서 다루고 있다. request, response, requestError 그리고 responseError Interceptor 에 대해서 설명하고 언제 어떻게 사용되는지 설명하였다. 또한 실제로 쓰일만한 예제를, 당신의 개발 생활에 도움이 되길 바라며 같이 수록하였다.

내가 이 글을 쓰며 행복했던 것 만큼, 이 글을 읽는 당신이 행복하길 바라며,

NaorYe

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.