AngularJS：将服务注入HTTP拦截器（循环依赖）

我正在尝试为AngularJS应用编写HTTP拦截器以处理身份验证。

这段代码有效，但是我担心手动注入服务，因为我认为Angular应该自动处理此问题：

    app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($location, $injector) {
        return {
            'request': function (config) {
                //injected manually to get around circular dependency problem.
                var AuthService = $injector.get('AuthService');
                console.log(AuthService);
                console.log('in request interceptor');
                if (!AuthService.isAuthenticated() && $location.path != '/login') {
                    console.log('user is not logged in.');
                    $location.path('/login');
                }
                return config;
            }
        };
    })
}]);

我刚开始做的事情，但是遇到了循环依赖问题：

    app.config(function ($provide, $httpProvider) {
    $provide.factory('HttpInterceptor', function ($q, $location, AuthService) {
        return {
            'request': function (config) {
                console.log('in request interceptor.');
                if (!AuthService.isAuthenticated() && $location.path != '/login') {
                    console.log('user is not logged in.');
                    $location.path('/login');
                }
                return config;
            }
        };
    });

    $httpProvider.interceptors.push('HttpInterceptor');
});

我担心的另一个原因是，Angular Docs中$ http上的部分似乎显示了一种将依赖项注入“常规方式”到Http拦截器中的方法。请参阅“拦截器”下的代码段：

// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    // optional method
    'request': function(config) {
      // do something on success
      return config || $q.when(config);
    },

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



    // optional method
    'response': function(response) {
      // do something on success
      return response || $q.when(response);
    },

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

$httpProvider.interceptors.push('myHttpInterceptor');

上面的代码应该放在哪里？

我想我的问题是执行此操作的正确方法是什么？

谢谢，我希望我的问题很清楚。

您在$ http和AuthService之间具有循环依赖关系。

您通过使用该$injector服务所做的事情是通过延迟AuthService上$ http的依赖关系来解决“鸡与蛋”问题。

我相信您所做的实际上是最简单的方法。

您还可以通过以下方式执行此操作：

• 稍后注册拦截器（在一个run()块而不是一个config()块中这样做可能已经成功了）。但是您可以保证$ http尚未被调用吗？
• 通过调用AuthService.setHttp()或其他方式注册拦截器时，将$ http手动“注入”到AuthService中。
• ...

这就是我最终要做的

  .config(['$httpProvider', function ($httpProvider) {
        //enable cors
        $httpProvider.defaults.useXDomain = true;

        $httpProvider.interceptors.push(['$location', '$injector', '$q', function ($location, $injector, $q) {
            return {
                'request': function (config) {

                    //injected manually to get around circular dependency problem.
                    var AuthService = $injector.get('Auth');

                    if (!AuthService.isAuthenticated()) {
                        $location.path('/login');
                    } else {
                        //add session_id as a bearer token in header of all outgoing HTTP requests.
                        var currentUser = AuthService.getCurrentUser();
                        if (currentUser !== null) {
                            var sessionId = AuthService.getCurrentUser().sessionId;
                            if (sessionId) {
                                config.headers.Authorization = 'Bearer ' + sessionId;
                            }
                        }
                    }

                    //add headers
                    return config;
                },
                'responseError': function (rejection) {
                    if (rejection.status === 401) {

                        //injected manually to get around circular dependency problem.
                        var AuthService = $injector.get('Auth');

                        //if server returns 401 despite user being authenticated on app side, it means session timed out on server
                        if (AuthService.isAuthenticated()) {
                            AuthService.appLogOut();
                        }
                        $location.path('/login');
                        return $q.reject(rejection);
                    }
                }
            };
        }]);
    }]);

注意：$injector.get调用应在拦截器的方法之内，如果尝试在其他地方使用它们，则将继续在JS中收到循环依赖项错误。

我认为直接使用$ injector是一种反模式。

打破循环依赖的一种方法是使用事件：注入$ rootScope，而不是注入$ state。与其直接重定向，不如直接重定向

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

加

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

错误的逻辑导致了这样的结果

实际上，在Http Interceptor中寻找用户创作是没有意义的。我建议将所有HTTP请求包装到单个.service（或.factory或.provider）中，并将其用于所有请求。每次调用函数时，都可以检查用户是否登录。如果一切正常，请允许发送请求。

在您的情况下，无论如何，Angular应用程序都会发送请求，您只需在此处检查授权，然后JavaScript将发送请求。

您问题的核心

myHttpInterceptor被$httpProvider实例调用。您AuthService使用$http，或$resource，这里您具有依赖项递归或循环依赖项。如果您从中删除该依赖项AuthService，那么您将不会看到该错误。

就像@Pieter Herroelen指出的那样，您可以将此拦截器放置在模块中module.run，但这更像是一种hack，而不是解决方案。

如果您要编写干净且具有自我描述性的代码，则必须遵循一些SOLID原则。

在这种情况下，至少“单一责任”原则将对您有很大帮助。

如果您只是在检查Auth状态（isAuthorized（）），我建议您将该状态放在一个单独的模块中，例如说“ Auth”，它仅保存该状态并且不使用$ http本身。

app.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.interceptors.push(function ($location, Auth) {
    return {
      'request': function (config) {
        if (!Auth.isAuthenticated() && $location.path != '/login') {
          console.log('user is not logged in.');
          $location.path('/login');
        }
        return config;
      }
    }
  })
}])

验证模块：

angular
  .module('app')
  .factory('Auth', Auth)

function Auth() {
  var $scope = {}
  $scope.sessionId = localStorage.getItem('sessionId')
  $scope.authorized = $scope.sessionId !== null
  //... other auth relevant data

  $scope.isAuthorized = function() {
    return $scope.authorized
  }

  return $scope
}

（我在这里使用localStorage将sessionId存储在客户端，但是例如，您也可以在$ http调用之后在AuthService中设置此值）