[英]Circular dependency in AngularJS
I've been trying to call UserService.openLogin() function from interceptorService (file: authenticationServices.js), but I'm not succeeding. 我一直在尝试从interceptorService(文件:authenticationServices.js)中调用UserService.openLogin()函数,但没有成功。
All is working right, but when I try to inject UserService as a dependency, in the interceptorService, AngularJS returns me the following error: 一切正常,但是当我尝试将UserService作为依赖项注入时,在拦截器服务中,AngularJS返回以下错误:
"Uncaught Error: [$injector:cdep] Circular dependency found: $http <- UserService <- interceptorService <- $http <- $templateRequest <- $compile". “未捕获的错误:[$ injector:cdep]找到循环依赖项:$ http <-UserService <-拦截器服务<-$ http <-$ templateRequest <-$ compile”。
Please, can someone help me? 拜托,有人可以帮我吗?
file: authenticationModule.js 文件:authenticationModule.js
angular
.module('app.authentication', [
'app.authentication.controllers',
'app.authentication.services',
'app.authentication.directives']
)
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/register', {
templateUrl: 'app/modules/authentication/authenticationViews/authenticationUserCreate.html',
controller: 'authenticationController as loginCtrl',
css: 'app/modules/authentication/authenticationViews/css/authenticationStyles.css',
})
.when('/edit', {
templateUrl: 'app/modules/authentication/authenticationViews/authenticationProfileEdit.html',
controller: 'authenticationController as loginCtrl',
css: 'app/modules/authentication/authenticationViews/css/authenticationStyles.css',
})
}])
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('interceptorService');
}])
file: authenticationControllers.js 文件:authenticationControllers.js
angular.module('app.authentication.controllers', [])
.controller('authenticationController', ['UserService', '$location', '$uibModalInstance',
function (UserService, $location, $uibModalInstance) {
var self = this;
self.user = {
username: '',
password: ''
};
self.login = function () {
UserService.login(self.user).then(
function (success) {
if (success.status == '400') {
window.alert(success.data.error_description);
}
else {
$location.path('/jobs');
$uibModalInstance.close();
}
},
function (error) {
UserService.logout();
window.alert(error.message)
})
};
self.closeLogin = function () {
$uibModalInstance.dismiss();
}
self.logout = function () {
UserService.logout();
};
}])
file: authenticationServices.js 文件:authenticationServices.js
angular.module('app.authentication.services', [])
.factory('StorageService', [function () {
return {
isAuth: false,
userData: {
userName: "",
token: ""
},
}
}])
.factory('UserService', ['$http', '$uibModal', 'StorageService', function ($http, $uibModal, StorageService) {
return {
login: function (user) {
var data = "grant_type=password&username=" + user.userName + "&password=" + user.password;
var serviceBase = "http://localhost:53944/";
return $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
.then(function (response) {
if (response.data.access_token) {
StorageService.isAuth = true;
StorageService.userData.token = response.data.access_token;
}
return response;
});
},
openLogin: function () {
$uibModal.open({
animation: true,
templateUrl: 'app/modules/authentication/authenticationViews/authenticationLogin.html',
controller: 'authenticationController',
controllerAs: 'loginCtrl',
size: 'md'
})
},
logout: function () {
StorageService.userData.token = "";
StorageService.userData.userName = "";
StorageService.isAuth = false;
}
};
}])
.factory('interceptorService', ['StorageService', 'UserService', function (StorageService, UserService) {
return {
request: function (config) {
var userData = StorageService.userData;
if (userData.token) {
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + userData.token;
}
return config;
},
responseError: function (rejection) {
debugger;
switch (rejection.status) {
case 401:
UserService.openLogin();
//window.alert("Erro: " + rejection.status);
break;
case 400:
window.alert("Erro: " + rejection.status + "Descrição: " + rejection.data.error_description);
break;
default:
window.alert("Erro: " + rejection.status);
}
return rejection;
}
}
}])
I've found a way to inject the UserService without circular dependency error. 我找到了一种注入UserService而不循环依赖错误的方法。 But I don't know whether is correct. 但是我不知道是否正确。 Does someone know? 有人知道吗
Look at the temporary solution: 看一下临时解决方案:
.factory('interceptorService', ['StorageService', '$injector', function (StorageService, $injector) {
return {
request: function (config) {
var userData = StorageService.userData;
if (userData.token) {
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + userData.token;
}
return config;
},
responseError: function (rejection) {
debugger;
switch (rejection.status) {
case 401:
$injector.get('UserService').openLogin();
break;
case 400:
window.alert("Erro: " + rejection.status + "Descrição: " + rejection.data.error_description);
break;
default:
window.alert("Erro: " + rejection.status);
}
return rejection;
}
}
}])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.