programing

Angular.js 인터셉터를 사용한HTTP 401 캡처

elseif 2023. 3. 5. 09:34

Angular.js 인터셉터를 사용한HTTP 401 캡처

Angular.js로 한 페이지 웹 앱에 인증을 구현하고 싶습니다.공식 Angular 문서에서는 다음과 같은 가로채기를 사용할 것을 권장합니다.

$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {

    // ...

    'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    }
  };
});

문제는 서버가 401 오류를 전송하면 브라우저는 즉시 "Unauthorized" 메시지 또는 로그인 팝업창(서버가 인증HTTP 헤더를 전송한 경우)으로 정지하지만 Angular는 권장대로 처리할 HTTP 오류를 대행 수신할 수 없다는 것입니다.제가 뭘 잘못 알고 있는 건가요?웹에서 찾아낸 예(예를 들어 이것, 이것 등)를 더 시도했지만 모두 효과가 없었습니다.

각도JS > 1.3 사용$httpProvider.interceptors.push('myHttpInterceptor');

.service('authInterceptor', function($q) {
    var service = this;

    service.responseError = function(response) {
        if (response.status == 401){
            window.location = "/login";
        }
        return $q.reject(response);
    };
})
.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('authInterceptor');
}])

앱 구성 블록:

var interceptor = ['$rootScope', '$q', "Base64", function(scope, $q, Base64) {
  function success(response) {
    return response;
  }

  function error(response) {
    var status = response.status;
    if (status == 401) {
      //AuthFactory.clearUser();
      window.location = "/account/login?redirectUrl=" + Base64.encode(document.URL);
      return;
    }
    // otherwise
    return $q.reject(response);
  }
  return function(promise) {
    return promise.then(success, error);
  }
}];

이유는 모르겠지만 401 에러 응답은 성공 함수로 들어갑니다.

'responseError': function(rejection)
                {
                    // do something on error

                    if (rejection.status == 401)
                    {
                        $rootScope.signOut();
                    }

                    return $q.reject(rejection);
                },
                'response': function (response) {
                    // do something on error
                    if (response.status == 401) {
                        $rootScope.signOut();
                    };
                    return response || $q.when(response);
                }

AngularJS 인터셉터는 $http 서비스로 발신된 콜에만 기능합니다.401을 반환하는 페이지로 이동하면 Angular는JS는 뛰지도 않아요.

언급URL : https://stackoverflow.com/questions/21230417/capture-http-401-with-angular-js-interceptor