순환 의존관계 발견: $http <- $templateFactory <- $view <- $state

순환 의존관계 발견: $http <- $templateFactory <- $view <- $state

현재 $location으로 정상적으로 동작하고 있는 401 체크가 있습니다.하지만 $state로 전환하고 대신 ui-router를 사용하고 싶습니다.이렇게 하면 다음과 같은 에러 코드가 표시됩니다.

Circular dependency found: $http <- $templateFactory <- $view <- $state <- authHttpResponseInterceptor <- $http <- $compile

특정 경로를 확인하고 로그인한 사용자가 해당 경로를 볼 수 없도록 하면 현재 코드가 정상으로 표시됩니다.

  /* Look for 401 auth errors and then redirect */
  .factory('authHttpResponseInterceptor',['$q','$location', function($q,$location) {

      return {
          response: function(response){
              if (response.status === 401) {
              }

              return response || $q.when(response);
          },
          responseError: function(rejection) {
              var reservedPaths = ['/','/login','/connect','/event'];
              if (rejection.status === 401 && _.contains(reservedPaths,$location.path().trim())) {
                  $location.path('/welcome');

              }
              return $q.reject(rejection);
          }
      };
  }])
  .config(['$httpProvider',function($httpProvider) {
      //Http Intercpetor to check auth failures for xhr requests
      $httpProvider.interceptors.push('authHttpResponseInterceptor');
  }]);

추가한 코드는 다음과 같습니다.

  /* Look for 401 auth errors and then redirect */
  .factory('authHttpResponseInterceptor',['$q','$location', **'$state',** function($q,$location, **$state**) {

      return {
          response: function(response){
              if (response.status === 401) {
              }

              return response || $q.when(response);
          },
          responseError: function(rejection) {
              var reservedPaths = ['/','/mycube','/connect','/event'];
              if (rejection.status === 401 && _.contains(reservedPaths,$location.path().trim())) {
                  **$state.go('home');**

              }
              return $q.reject(rejection);
          }
      };
  }])
  .config(['$httpProvider',function($httpProvider) {
      //Http Intercpetor to check auth failures for xhr requests
      $httpProvider.interceptors.push('authHttpResponseInterceptor');
  }]);

로케이션에서 정상적으로 동작하는데 스테이트를 추가하면 왜 이 문제가 발생합니까?

$state 서비스가 $http 서비스와의 순환 의존 관계를 초래하고 있는 것으로 보입니다.이는 templateFactory(https://github.com/angular-ui/ui-router/blob/master/src/templateFactory.js) 참조)가 $semplate 서비스와 함께 인터셉터 자체가 $semplate 서비스로 구성되어 있기 때문일 수 있습니다.

이 순환 의존성 문제를 해결하려면 $injector 서비스를 사용하여 $state 서비스를 대행 수신기에 연결할 수 있습니다.개정된 코드를 참조하십시오.

/* Look for 401 auth errors and then redirect */
module.factory('authHttpResponseInterceptor', ['$q','$location', '$injector', function($q, $location, $injector) {
    return {
        response: function(response){
            if (response.status === 401) {
            }

            return response || $q.when(response);
        },
        responseError: function(rejection) {
            var reservedPaths = ['/', '/mycube', '/connect', '/event'];
            if (rejection.status === 401 && _.contains(reservedPaths, $location.path().trim())) {
                var stateService = $injector.get('$state');
                stateService.go('home');
            }
            return $q.reject(rejection);
        }
    };
}]);

$120 서비스에 대한 자세한 내용은 https://docs.angularjs.org/api/auto/service/$injector를 참조하십시오.

중요한

상태 변경 이벤트를 사용할 것을 권장합니다($state를 사용한 오류를 확인하려면 https://github.com/angular-ui/ui-router/wiki#state-change-events) 참조).ChangeError 및 401에서 반환된 오류 검사.

여기 제가 한 가장 간단한 해결책이 있습니다. 그리고 효과가 있었습니다.공장 내에는 다음과 같이 기재되어 있습니다.

var $http = $injector.get("$http");

그런 다음 사용$http평소처럼요

메모: 공장에서 사용할 수 있는 $injector가 없는 경우 다음과 같이 주입하십시오.

.factory('authHttpResponseInterceptor',['$q','$location','$injector', function($q,$location,$injector) {
}])

언급URL : https://stackoverflow.com/questions/25495942/circular-dependency-found-http-templatefactory-view-state