AngularJs HTTP 응답 인터셉터_AngularJS에 대한 간략한 분석

인터셉터를 사용하는 이유는 무엇입니까?

언제든지 인증, 오류 처리 등과 같은 전역 기능을 요청에 추가하려는 경우 요청이 서버로 전송되기 전이나 서버가 반환될 때 요청을 가로채는 것이 더 좋은 방법입니다.

AngularJs는 인터셉터를 통해 전역 수준에서 이를 처리하는 방법을 제공합니다

.

인터셉터를 사용하면 다음을 수행할 수 있습니다.

요청 메서드를 구현하여 요청 가로채기: 이 메서드는 $http가 백그라운드로 요청을 보내기 전에 실행되므로 구성을 수정하거나 다른 작업을 수행할 수 있습니다. 이 메소드는 요청 구성 객체를 매개변수로 수신하고 구성 객체 또는 Promise를 반환해야 합니다. 잘못된 구성 개체 또는 약속이 반환되면 거부되어 $http 호출이 실패하게 됩니다.

응답 메서드를 구현하여 응답 가로채기: 이 메서드는 $http가 백그라운드에서 응답을 받은 후 실행되므로 응답을 수정하거나 다른 작업을 수행할 수 있습니다. 이 메서드는 응답 개체를 매개변수로 받고 응답 개체나 약속을 반환해야 합니다. 응답 개체에는 백그라운드의 요청 구성, 헤더, 상태 및 데이터가 포함됩니다. 잘못된 응답 객체가 반환되거나 약속이 거부되면 $http 호출이 실패합니다.

requestError 메소드를 구현하여 요청 예외를 차단합니다. 요청이 전송되지 않거나 인터셉터에 의해 거부되는 경우가 있습니다. 요청 예외 인터셉터는 이전 요청 인터셉터에 의해 중단된 요청을 캡처합니다. 요청을 복원하거나 때로는 진행률 표시줄 닫기, 버튼 및 입력 상자 활성화 등 요청 이전에 수행한 구성을 실행 취소하는 데 사용할 수 있습니다.

responseError 메소드를 구현하여 응답 예외를 차단합니다. 때때로 백그라운드 호출이 실패합니다. 요청 인터셉터에 의해 거부되었거나 이전 응답 인터셉터에 의해 중단되었을 수도 있습니다. 이 경우 응답 예외 인터셉터는 백그라운드 호출을 재개하는 데 도움이 될 수 있습니다.

인터셉터의 핵심은 $httpprovider.interceptors 배열에 추가되는 서비스 팩토리입니다. $httpProvider에 등록하세요.

AngularJs는 2개의 성공 인터셉터(요청, 응답)와 2개의 실패 인터셉터(requestError, responseError)를 포함하여 4개의 인터셉터를 제공합니다.

서비스에 하나 이상의 인터셉터를 추가합니다.

angular.module("myApp", []) 
  .factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        ...... 
        return $q.reject(response); 
      }, 
      'response' : function(response) { 
        ...... 
        return response; 
      }, 
      'request' : function(config) { 
        ...... 
        return config; 
      }, 
      'requestError' : function(config){ 
        ...... 
        return $q.reject(config); 
      } 
    } 
  return httpInterceptor; 
} 

그런 다음 $httpProvider를 사용하여 .config() 함수에 인터셉터를 등록합니다

angular.module("myApp", []) 
.config([ '$httpProvider', function($httpProvider) { 
  $httpProvider.interceptors.push('httpInterceptor'); 
} ]); 

실제 예: (401, 404 차단)

routerApp.config([ '$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('httpInterceptor'); 
  } ]); 
  routerApp.factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        if (response.status == 401) { 
          var rootScope = $injector.get('$rootScope'); 
          var state = $injector.get('$rootScope').$state.current.name; 
          rootScope.stateBeforLogin = state; 
          rootScope.$state.go("login"); 
          return $q.reject(response); 
        } else if (response.status === 404) { 
          alert("404!"); 
          return $q.reject(response); 
        } 
      }, 
      'response' : function(response) { 
        return response; 
      } 
    } 
    return httpInterceptor; 
  }  
]); 

세션 주입(요청 인터셉터)

서버측 인증을 구현하는 방법에는 두 가지가 있습니다. 첫 번째는 전통적인 쿠키 기반 인증입니다. 사용자는 서버 측 쿠키를 통해 각 요청에 대해 인증됩니다. 또 다른 방법은 토큰 기반 검증입니다. 사용자가 로그인하면 백그라운드에서 sessionToken을 받게 됩니다. sessionToken은 서버 측의 각 사용자를 식별하며 서버로 전송되는 모든 요청에 ​​포함됩니다.

다음 sessionInjector는 캡처된 각 요청에 x-session-token 헤더를 추가합니다(현재 사용자가 로그인한 경우).

<!-- lang: js -->
module.factory('sessionInjector', ['SessionService', function(SessionService) {
  var sessionInjector = {
    request: function(config) {
      if (!SessionService.isAnonymus) {
        config.headers['x-session-token'] = SessionService.token;
      }
      return config;
    }
  };
  return sessionInjector;
}]);
module.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('sessionInjector');
}]);

그런 다음 요청을 작성하세요.

<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos');

sessionInjector가 가로채기 전의 구성 개체는 다음과 같습니다.

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*"
  }
}

sessionInjector가 가로채는 후의 구성 개체는 다음과 같습니다.

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*",
    "x-session-token": 415954427904
  }
}

위 내용은 AngularJ의 HTTP 응답 인터셉터에 대한 관련 지식을 소개합니다. 이 기사를 공유하는 것이 도움이 되기를 바랍니다.