$http 인터셉터에 $state(ui-router)를 주입하면 순환 의존성이 발생한다.

$http 인터셉터에 $state(ui-router)를 주입하면 순환 의존성이 발생한다.

달성하려고 하는 것

$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-metric이 주사하다$http에의 의존으로서 봉사하다$TemplateFactory그 다음에, 그 다음에, 에 대한 순환 참조가 작성됩니다.$http의 범위 내에서$httpProvider요격기를 파견할 때 그 자체입니다.

동일한 순환 종속성 예외가 발생하며,$http요격기로 직접 전송해 줄 수 있어요

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

관심사의 분리

순환 의존성 예외는 애플리케이션 내에 안정성 문제를 일으킬 수 있는 여러 우려가 혼재되어 있음을 나타냅니다.이 예외에 해당하는 경우, 자신을 참조하게 되는 의존관계를 피하기 위해 아키텍처에 대해 천천히 검토할 필요가 있습니다.

@스티븐 프리드리히의 대답

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

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

질문이 Angular의 중복입니다.HTTP 인터셉터에 서비스 주입(순환 의존성)

이 스레드에서 답변을 다시 투고합니다.

더 나은 수정

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

순환 의존 관계를 끊는 방법은 이벤트를 사용하는 것입니다.$state를 주입하는 대신 $rootScope를 주입합니다.직접 리다이렉트 하는 대신

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

플러스

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

이 방법으로 문제를 분리할 수 있습니다.

1. 401 응답 검출
2. 로그인으로 리다이렉트

조나단의 해결책은 내가 현재 상태를 구하려고 하기 전까지 훌륭했다.ui-router v0.2.10에서는 인터셉터의 초기 페이지 로드에 현재 상태가 입력되지 않는 것 같습니다.

어쨌든 $state를 사용해서 해결했습니다.대신 ChangeError 이벤트가 발생합니다.$state($state)ChangeError 이벤트는 에러뿐만 아니라 상태에 대한 정보와 상태를 모두 제공합니다.꽤 괜찮은데.

$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");
        }
    });

언급URL : https://stackoverflow.com/questions/20230691/injecting-state-ui-router-into-http-interceptor-causes-circular-dependency