AngularJS:将服务注入HTTP拦截器(循环依赖)
AngularJS:将服务注入HTTP拦截器(循环依赖)
提问于 2013-12-18 08:29:34
我正在尝试为我的AngularJS应用程序编写一个HTTP拦截器来处理身份验证。
这段代码可以工作，但我担心手动注入服务，因为我认为Angular应该自动处理这一点：
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() && $location.path != '/login') {
console.log('user is not logged in.');
$location.path('/login');
}
return config;
}
};
})
}]);我开始做的事情，但遇到了循环依赖问题：
app.config(function ($provide, $httpProvider) {
$provide.factory('HttpInterceptor', function ($q, $location, AuthService) {
return {
'request': function (config) {
console.log('in request interceptor.');
if (!AuthService.isAuthenticated() && $location.path != '/login') {
console.log('user is not logged in.');
$location.path('/login');
}
return config;
}
};
});
$httpProvider.interceptors.push('HttpInterceptor');
});我担心的另一个原因是，Angular Docs中的section on $http似乎展示了一种将依赖项以“常规方式”注入Http拦截器的方法。在“拦截器”下面查看他们的代码片段：
// 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');上面的代码应该放在哪里？
我想我的问题是，做这件事的正确方式是什么？
谢谢，我希望我的问题足够清楚。
回答 3
Stack Overflow用户
发布于 2014-09-11 15:15:47
这就是我最终要做的
.config(['$httpProvider', function ($httpProvider) {
//enable cors
$httpProvider.defaults.useXDomain = true;
$httpProvider.interceptors.push(['$location', '$injector', '$q', function ($location, $injector, $q) {
return {
'request': function (config) {
//injected manually to get around circular dependency problem.
var AuthService = $injector.get('Auth');
if (!AuthService.isAuthenticated()) {
$location.path('/login');
} else {
//add session_id as a bearer token in header of all outgoing HTTP requests.
var currentUser = AuthService.getCurrentUser();
if (currentUser !== null) {
var sessionId = AuthService.getCurrentUser().sessionId;
if (sessionId) {
config.headers.Authorization = 'Bearer ' + sessionId;
}
}
}
//add headers
return config;
},
'responseError': function (rejection) {
if (rejection.status === 401) {
//injected manually to get around circular dependency problem.
var AuthService = $injector.get('Auth');
//if server returns 401 despite user being authenticated on app side, it means session timed out on server
if (AuthService.isAuthenticated()) {
AuthService.appLogOut();
}
$location.path('/login');
return $q.reject(rejection);
}
}
};
}]);
}]);注意：$injector.get调用应该在拦截器的方法中，如果您尝试在其他地方使用它们，您将继续在JS中获得循环依赖错误。
Stack Overflow用户
发布于 2016-05-09 16:40:10
我认为直接使用$injector是一种反模式。
打破循环依赖的一种方法是使用事件:注入$rootScope而不是注入$state。不是直接重定向，而是这样做
this.$rootScope.$emit("unauthorized");加号
angular
.module('foo')
.run(function($rootScope, $state) {
$rootScope.$on('unauthorized', () => {
$state.transitionTo('login');
});
});Stack Overflow用户
发布于 2016-11-02 15:04:16
如果您只是检查身份验证状态(isAuthorized())，我建议将该状态放在一个单独的模块中，比如" Auth "，它只保存状态，而不使用$http本身。
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(function ($location, Auth) {
return {
'request': function (config) {
if (!Auth.isAuthenticated() && $location.path != '/login') {
console.log('user is not logged in.');
$location.path('/login');
}
return config;
}
}
})
}])身份验证模块：
angular
.module('app')
.factory('Auth', Auth)
function Auth() {
var $scope = {}
$scope.sessionId = localStorage.getItem('sessionId')
$scope.authorized = $scope.sessionId !== null
//... other auth relevant data
$scope.isAuthorized = function() {
return $scope.authorized
}
return $scope
}(我在这里使用localStorage在客户端存储sessionId，但您也可以在调用$http之后在AuthService中设置它)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20647483
复制相关文章
相似问题