AngularJS: Injecting service into a HTTP interceptor (Circular dependency)

Question

I'm trying to write a HTTP interceptor for my AngularJS app to handle authentication.

This code works, but I'm concerned about manually injecting a service since I thought Angular is supposed to handle this automatically:

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

What I started out doing, but ran into circular dependency problems:

    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');
});

Another reason why I'm concerned is that the section on $http in the Angular Docs seem to show a way to get dependencies injected the "regular way" into a Http interceptor. See their code snippet under "Interceptors":

// 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');

Where should the above code go?

I guess my question is what's the right way to go about doing this?

Thanks, and I hope my question was clear enough.

Just out of curiosity, what dependencies - if any - where you using in your AuthService? I was having circular dependency issues using the request method in the http interceptor, which brought me here. I'm using angularfire's $firebaseAuth. When I removed the block of code that uses $route from the injector (line 510), everything started working. There's an issue here but it's about using $http in the interceptor. Off to git! — slamborne
Hm, for what it's worth, AuthService in my case depends on $window, $http, $location, $q — shaunlim
I've got a case that retries the request in the interceptor in some circumstances, so there is an even shorter circular dependency on $http. The only way around it I've found is to use $injector.get, but it would be great to know if there is good way to structure the code to avoid this. — Michal Charemza
Take a look at the response from @rewritten: github.com/angular/angular.js/issues/2367 that fixed a similar problem for me. What he is doing is like this: $http = $http || $injector.get("$http"); of course you can replace $http with your own service you are trying to use. — Jonathan

Pieter Herroelen Pieter Herroelen · Accepted Answer · 2014-02-07T15:52:52

You have a circular dependency between $http and your AuthService.

What you are doing by using the $injector service is solving the chicken-and-egg problem by delaying the dependency of $http on the AuthService.

I believe that what you did is actually the simplest way of doing it.

You could also do this by:

Registering the interceptor later (doing so in a run() block instead of a config() block might already do the trick). But can you guarantee that $http hasn't been called already?
"Injecting" $http manually into the AuthService when you're registering the interceptor by calling AuthService.setHttp() or something.
...

AngularJS: Injecting service into a HTTP interceptor (Circular dependency)

5 Answers