web-dev-qa-db-ja.com

循環依存が見つかりました：$ 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');
  }]);

ロケーションで問題なく動作するのに、なぜステートを追加するとこの問題が発生するのですか？

angularjsangular-ui-routerangular-routing
34
Mr. BigglesWorth

$ stateサービスは、$ httpサービスとの循環依存関係をもたらしているようです。これは、templateFactory（ https://github.com/angular-ui/ui-router/blob/master/src/templateFactory.js を参照）がインジェクトされているという事実によって引き起こされる可能性があります。インターセプター自体が$ httpサービスで構成されていることに加えて、$ httpサービス。

この循環依存の問題を回避するには、$ 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);
        }
    };
}]);

$ injectorサービスの詳細については、こちらをご覧ください： https://docs.angularjs.org/api/auto/service/ $ injector

重要

状態変更イベント（ https://github.com/angular-ui/ui-router/wiki#state-change-events を参照）を使用して、$ stateChangeErrorを使用してエラーを監視することをお勧めします401から返されたエラー。

77
aaronroberson

これが私がやった最も簡単な解決策であり、うまくいきました。工場内で次のように記述します。

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

そして、$http通常どおり。

注：工場で$ injectorを使用できない場合は、次のように挿入します。

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