title: AngularJS: Injecting service into a HTTP interceptor (Circular dependency)
body: <p>I'm trying to write a HTTP interceptor for my AngularJS app to handle authentication.</p>
  
  <p>This code works, but I'm concerned about manually injecting a service since I thought Angular is supposed to handle this automatically:</p>
  
  <pre><code>    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() &amp;&amp; $location.path != '/login') {
                      console.log('user is not logged in.');
                      $location.path('/login');
                  }
                  return config;
              }
          };
      })
  }]);
  </code></pre>
  
  <p>What I started out doing, but ran into circular dependency problems:</p>
  
  <pre><code>    app.config(function ($provide, $httpProvider) {
      $provide.factory('HttpInterceptor', function ($q, $location, AuthService) {
          return {
              'request': function (config) {
                  console.log('in request interceptor.');
                  if (!AuthService.isAuthenticated() &amp;&amp; $location.path != '/login') {
                      console.log('user is not logged in.');
                      $location.path('/login');
                  }
                  return config;
              }
          };
      });
  
      $httpProvider.interceptors.push('HttpInterceptor');
  });
  </code></pre>
  
  <p>Another reason why I'm concerned is that the <a href="http://docs.angularjs.org/api/ng.%24http">section on $http</a> 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":</p>
  
  <pre><code>// 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');
  </code></pre>
  
  <p>Where should the above code go?</p>
  
  <p>I guess my question is what's the right way to go about doing this?</p>
  
  <p>Thanks, and I hope my question was clear enough.</p>