AngularJS: услуга инжекции в HTTP-перехватчик (круговая зависимость)
Я пытаюсь написать HTTP-перехватчик для моего приложения AngularJS для проверки подлинности.
Этот код работает, но я беспокоюсь о том, чтобы вручную вводить услугу, поскольку я думал, что 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');
});
Еще одна причина, по которой я беспокоюсь, заключается в том, что раздел на странице $http в Angular Docs, похоже, показывает способ получения зависимостей, вводимых "обычным способом" "в перехватчик 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');
Где должен стоять вышеуказанный код?
Думаю, мой вопрос в том, как правильно это сделать?
Спасибо, и я надеюсь, что мой вопрос был достаточно ясным.
Ответы
Ответ 1
У вас есть циклическая зависимость между $http и вашим AuthService.
То, что вы делаете с помощью службы $injector, - это решение проблемы курица и яйцо, задерживая зависимость $http от AuthService.
Я считаю, что то, что вы сделали, на самом деле является самым простым способом сделать это.
Вы также можете сделать это:
- Регистрация перехватчика позже (выполнение этого в блоке
run() вместо блока config() может уже сделать трюк). Но можете ли вы гарантировать, что $http уже не был вызван?
- "Инъекция" $http вручную в AuthService, когда вы регистрируете перехватчик, вызывая
AuthService.setHttp() или что-то в этом роде.
- ...
Ответ 2
Это то, что я закончил делать
.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.
Ответ 3
Я думаю, что использование инжектора $напрямую является антипатерном.
Способ разбить круговую зависимость - использовать событие:
Вместо того, чтобы вводить $state, введите $rootScope.
Вместо прямого перенаправления do
this.$rootScope.$emit("unauthorized");
плюс
angular
.module('foo')
.run(function($rootScope, $state) {
$rootScope.$on('unauthorized', () => {
$state.transitionTo('login');
});
});
Ответ 4
Плохая логика сделала такие результаты
На самом деле нет смысла искать, автор авторизован или нет в Http Interceptor. Я бы рекомендовал обернуть все ваши HTTP-запросы в один .service(или .factory или в .provider) и использовать его для ВСЕХ запросов. Каждый раз, когда вы вызываете функцию, вы можете проверить, зарегистрирован ли пользователь или нет. Если все в порядке, разрешите отправку запроса.
В вашем случае приложение Angular отправит запрос в любом случае, вы просто проверите авторизацию там, и после этого JavaScript отправит запрос.
Ядро вашей проблемы
myHttpInterceptor вызывается в $httpProvider экземпляре. Ваш AuthService использует $http или $resource, и здесь вы имеете рекурсию зависимости или круговую зависимость. Если вы удалите эту зависимость из AuthService, вы не увидите эту ошибку.
Также, как указал @Pieter Herroelen, вы можете разместить этот перехватчик в своем модуле module.run, но это будет больше похоже на взлом, а не на решение.
Если вы делаете чистый и самоописательный код, вы должны пойти с некоторыми принципами SOLID.
По крайней мере, принцип одиночной ответственности поможет вам в таких ситуациях.
Ответ 5
Если вы просто проверяете состояние Auth (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;
}
}
})
}])
Модуль Auth:
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 на стороне клиента здесь, но вы также можете установить это в свой AuthService после вызова $http, например)
