Angular JS solve circular dependency

Question

I try to perform a http.post call in a http interceptor, but I get a

Circular dependency found: $http <- Ace <- authInterceptor <- $http <- $templateRequest <- $compile

I see why but I dont know how to solve it... Still new to angular and a little confusing sometime, I hope you can help me :) Heres is my code:

var app = angular.module('AceAngularApi', []);

app.service('Ace', ['$http', '$q', '$injector', '$window', function($http, $q, $injector, $window) {

    var user = null;

    var getCurrentUser = function() {
        var url = "http://localhost:8080/api/currentuser";

        var response = $http.post(url, {}).then(function(response) {});
        return response;
    };
    return {
        getCurrentUser: getCurrentUser,
    }
}]);

app.factory('authInterceptor', ['$rootScope', '$q', '$window', '$injector', 'Ace',
    function($rootScope, $q, $window, $injector, Ace) {
        return {
            request: function(config) {
                config.headers = config.headers || {};
                if ($window.localStorage.token) {
                    config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
                }
                return config;
            },
            response: function(response) {
                if (response.status === 401) {
                    // handle the case where the user is not authenticated
                } else {
                    Ace.getCurrentUser().then(function() {
                        console.log("Got current user");
                    });
                }
                return response || $q.when(response);
            }
        };
    }
]);

app.config(function($httpProvider) {
    $httpProvider.interceptors.push('authInterceptor');
});

Try once with injecting Ace using injector like var Ace = $injector.get('Ace'); in authInterceptor — Satpal
– Satpal, Commented Aug 5, 2015 at 8:03

Rebornix · Accepted Answer · 2015-08-05 08:22:15Z

8

You are trying to define $http's pre-processing functionality by injecting authInterceptor into $httpProvider, however authInterceptor has dependency on $http, it leads to circular dependency problem.

To get around this circular dependency issue, you can use the $injector service to wire up Ace

app.factory('authInterceptor', ['$rootScope', '$q', '$window', '$injector',
function($rootScope, $q, $window, $injector) {
    return {
        response: function(response) {
            if (response.status === 401) {
                // handle the case where the user is not authenticated
            } else {
                var Ace = $injector.get('Ace');
                Ace.getCurrentUser().then(function() {
                    console.log("Got current user");
                });
            }
            return response || $q.when(response);
        }
    };
  }
]);

Another workaround is registering the interceptor in a run() block instead of a config() block, but keep in mind, before run() is executed, any call to $http have nothing to do with authInterceptor

answered Aug 5, 2015 at 8:22

Rebornix

5,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jjuser19jj Over a year ago

Thank that worked, at least partly. Now I can send a request but it gets stock in a endless loop, calling Ace.getCurrentUser() over and over again....

Collectives™ on Stack Overflow

Angular JS solve circular dependency

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related