AngularJS:将服务注入HTTP拦截器(循环依赖)

2022-08-30 05:08:33

我正在尝试为我的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');

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

我想我的问题是,这样做的正确方法是什么?

谢谢,我希望我的问题足够清楚。


答案 1

这就是我最终所做的

  .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);
                    }
                }
            };
        }]);
    }]);

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


答案 2

$http和 AuthService 之间有一个循环依赖关系。

使用该服务所要做的是通过延迟$http对 AuthService 的依赖性来解决先有鸡还是先有蛋的问题。$injector

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

您也可以通过以下方式执行此操作:

  • 稍后注册拦截器(在块而不是块中执行此操作可能已经可以解决问题)。但是你能保证$http还没有被叫到吗?run()config()
  • “注入”$http通过调用或其他方式注册拦截器时手动注入 AuthService。AuthService.setHttp()
  • ...