Angular.jsを使用して、単一ページのWebアプリに認証を実装したいと思います。 official Angular documentation はインターセプターの使用を推奨しています:
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// ...
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
問題は、サーバーが401エラーを送信すると、ブラウザーがすぐに「Unauthorized」メッセージまたはログインポップアップウィンドウ(サーバーによって認証HTTPヘッダーが送信される場合)で停止するが、Angular推奨されるように、処理するHTTPエラーをインターセプターでキャプチャできません。何か誤解していますか?Webで見つかった他の例を試しました( this 、 this および this )が、いずれも機能しませんでした。
アプリ構成ブロック内:
var interceptor = ['$rootScope', '$q', "Base64", function(scope, $q, Base64) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
//AuthFactory.clearUser();
window.location = "/account/login?redirectUrl=" + Base64.encode(document.URL);
return;
}
// otherwise
return $q.reject(response);
}
return function(promise) {
return promise.then(success, error);
}
}];
AngularJS> 1.3の場合は、$httpProvider.interceptors.Push('myHttpInterceptor');
を使用します
.service('authInterceptor', function($q) {
var service = this;
service.responseError = function(response) {
if (response.status == 401){
window.location = "/login";
}
return $q.reject(response);
};
})
.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.Push('authInterceptor');
}])
理由はわかりませんが、401エラーの応答は成功関数に入ります。
'responseError': function(rejection)
{
// do something on error
if (rejection.status == 401)
{
$rootScope.signOut();
}
return $q.reject(rejection);
},
'response': function (response) {
// do something on error
if (response.status == 401) {
$rootScope.signOut();
};
return response || $q.when(response);
}
AngularJSインターセプターは、$ httpサービスで行われた呼び出しに対してのみ機能します。 401を返すページに移動すると、AngularJSは実行されません。