How to configure the $http service in Angular depending on itself?

Question

I'm trying to configure the $http service of Angular, to redirect to an URL when the status code is 403.

No problems so far but the URL to redirect to is coming from the server, through a service which is using $http (obiously).

Here's a piece of code:

angular
.module('app')
.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push(['$q', 'URLs',
    function($q, Redirect) {
      return {
        request: function(config) {
          return config || $q.when(config);
        },
        responseError: function(response) {
          if(response.status === 403) {
            // redirect to URLs.login
          }
          return $q.reject(response);
        }
      };
    }
  ]);
}])
.factory('URLs', ['$http', function($http) {
  var URLs;
  $http.get('/urls').then(function(response) {
    URLs = response.data;
  });
  return URLs;
}]);

This code is creating a circular dependency (error) in Angular.

Is there a way that I can do this, having dynamic URLs that are coming from a server and based on this to redirect the user to one of them when the response.status is 403?

Answer 1

Use $injector service to lazily load the URLs service:

angular
.module('app')
.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push(['$q', '$injector',
    function($q, $injector) {
      return {
        request: function(config) {
          return config || $q.when(config);
        },
        responseError: function(response) {
          var Redirect = $injector.get('URLs');
          if(response.status === 403) {
            // redirect to URLs.login
          }
          return $q.reject(response);
        }
      };
    }
  ]);
}])

You can also break this circular dependency in the URLs service by injecting the $injector there.