I encountered a Circular dependency issue while attempting to make a http.post call in a http interceptor:
Circular dependency found: $http <- Ace <- authInterceptor <- $http <- $templateRequest <- $compile
I understand the problem, but I am unsure how to resolve it. I am still new to Angular and sometimes find it confusing. I would appreciate any help you could provide :) Below is the code snippet:
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');
});