Ich versuche, einen HTTP-Interceptor für meine AngularJS-App zu schreiben, um die Authentifizierung zu handhaben.
Dieser Code funktioniert, aber ich mache mir Sorgen um das manuelle Einfügen eines Dienstes, da ich dachte, Angular sollte dies automatisch erledigen:
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;
}
};
})
}]);Was ich anfing zu tun, aber auf zirkuläre Abhängigkeitsprobleme stieß:
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');
});Ein weiterer Grund, warum ich besorgt bin, ist, dass der Abschnitt über $ http in den Angular Docs einen Weg zu zeigen scheint, wie Abhängigkeiten auf "normale Weise" in einen HTTP-Interceptor injiziert werden können. Siehe ihren Code-Ausschnitt unter "Interceptors":
// 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');Wohin soll der obige Code gehen?
Ich denke, meine Frage ist, wie man das richtig macht.
Danke, und ich hoffe, meine Frage war klar genug.
1
Welche Abhängigkeiten - falls vorhanden - verwenden Sie aus Neugier in Ihrem AuthService? Ich hatte zirkuläre Abhängigkeitsprobleme mit der Anforderungsmethode im http-Interceptor, die mich hierher gebracht haben. Ich verwende Angularfires $ firebaseAuth. Als ich den Codeblock, der $ route verwendet, aus dem Injektor entfernte (Zeile 510), fing alles an zu funktionieren. Hier gibt es ein Problem , aber es geht darum, $ http im Interceptor zu verwenden. Auf zum Trottel!
—
Slamborne
Hm, für das, was es wert ist, hängt AuthService in meinem Fall von $ window, $ http, $ location, $ q
—
shaunlim
Ich habe einen Fall, in dem die Anforderung unter bestimmten Umständen im Interceptor wiederholt wird, sodass eine noch kürzere zirkuläre Abhängigkeit von besteht
—
Michal Charemza
$http. Der einzige Weg, den ich gefunden habe, ist die Verwendung $injector.get, aber es wäre toll zu wissen, ob es eine gute Möglichkeit gibt, den Code zu strukturieren, um dies zu vermeiden.
Schauen Sie sich die Antwort von @rewritten an: github.com/angular/angular.js/issues/2367 , die ein ähnliches Problem für mich behoben hat. Was er tut, ist wie folgt: $ http = $ http || $ Injektor.get ("$ http"); Natürlich können Sie $ http durch Ihren eigenen Dienst ersetzen, den Sie verwenden möchten.
—
Jonathan