내가 이루고자하는 것

$ http 요청이 401 오류를 반환하는 경우 특정 상태 (로그인)로 전환하고 싶습니다. 따라서 $ http 인터셉터를 만들었습니다.

문제

인터셉터에 '$ state'를 삽입하려고 할 때 순환 종속성이 발생합니다. 왜 그리고 어떻게 수정합니까?

암호

//Inside Config function

    var interceptor = ['$location', '$q', '$state', function($location, $q, $state) {
        function success(response) {
            return response;
        }

        function error(response) {

            if(response.status === 401) {
                $state.transitionTo('public.login');
                return $q.reject(response);
            }
            else {
                return $q.reject(response);
            }
        }

        return function(promise) {
            return promise.then(success, error);
        }
    }];

    $httpProvider.responseInterceptors.push(interceptor);

수정

$injector서비스를 사용하여 서비스에 대한 참조를 얻으십시오 $state.

var interceptor = ['$location', '$q', '$injector', function($location, $q, $injector) {
    function success(response) {
        return response;
    }

    function error(response) {

        if(response.status === 401) {
            $injector.get('$state').transitionTo('public.login');
            return $q.reject(response);
        }
        else {
            return $q.reject(response);
        }
    }

    return function(promise) {
        return promise.then(success, error);
    }
}];

$httpProvider.responseInterceptors.push(interceptor);

원인

angular-ui-router 는 $http서비스를 종속성으로 주입 $TemplateFactory한 다음 $http내부에 대한 순환 참조를 생성 합니다.$httpProvider 는 인터셉터를 디스패치 할 자체 .

$http이와 같은 인터셉터에 서비스를 직접 주입하려고하면 동일한 순환 종속성 예외가 발생합니다 .

var interceptor = ['$location', '$q', '$http', function($location, $q, $http) {

우려 사항 분리

순환 종속성 예외는 애플리케이션 내에서 안정성 문제를 일으킬 수있는 우려 사항이 혼합되어 있음을 나타낼 수 있습니다. 이 예외가있는 경우 자신을 참조하는 종속성을 방지하기 위해 시간을내어 아키텍처를 살펴 봐야합니다.

@Stephen Friedrich의 대답

나는 아래의 답변에 동의합니다. $injector 하여 원하는 서비스에 대한 참조를 직접 얻는 것은 이상적이지 않으며 안티 패턴으로 간주 될 수 있다는 점에 .

이벤트를 내보내는 것은 훨씬 더 우아하고 분리 된 솔루션입니다.

질문은 AngularJS : HTTP 인터셉터에 서비스 주입 (순환 종속성) .

여기에 해당 스레드에서 내 답변을 다시 게시하고 있습니다.

더 나은 수정

$ injector를 직접 사용하는 것은 반 패턴이라고 생각합니다.

순환 종속성을 끊는 방법은 이벤트를 사용하는 것입니다. $ state를 주입하는 대신 $ rootScope를 주입하십시오. 직접 리디렉션하는 대신

this.$rootScope.$emit("unauthorized");

...을 더한

angular
    .module('foo')
    .run(function($rootScope, $state) {
        $rootScope.$on('unauthorized', () => {
            $state.transitionTo('login');
        });
    });

그런 식으로 우려 사항을 분리했습니다.

1. 401 응답 감지
2. 로그인으로 리디렉션

현재 상태를 저장하려고 할 때까지 Jonathan의 솔루션은 훌륭했습니다. 에서 UI 라우터 v0.2.10 현재 상태는 인터셉터의 초기 페이지로드에 채워하지 않는 것 같습니다.

어쨌든 $ stateChangeError 이벤트를 대신 사용하여 해결했습니다 . $ stateChangeError의 이벤트는 모두 당신 제공 에 와 에서 국가뿐만 아니라 오류입니다. 꽤 멋져요.

$rootScope.$on('$stateChangeError',
    function(event, toState, toParams, fromState, fromParams, error){
        console.log('stateChangeError');
        console.log(toState, toParams, fromState, fromParams, error);

        if(error.status == 401){
            console.log("401 detected. Redirecting...");

            authService.deniedState = toState.name;
            $state.go("login");
        }
    });