I'd like to implement authentication on a single page web app with Angular.js. The official Angular documentation recommends the using of interceptors:
我想用Angular.js在一个页面web应用程序上实现身份验证。官方角度文件建议使用拦截器:
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// ...
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
The problem is when the server sends 401 error, the browser immediately stops with "Unauthorized" message, or with login pop-up window (when authentication HTTP header is sent by the server), but Angular can't capture with it's interceptor the HTTP error to handle, as recommended. Am I misunderstanding something? I tried more examples found on web (this, this and this for example), but none of them worked.
问题是,当服务器发送401错误时,浏览器会立即停止发送“未授权”消息,或者使用登录弹出窗口(当服务器发送身份验证HTTP报头时),但是角无法捕获它的拦截器所处理的HTTP错误,如推荐的那样。我误解什么?我在web上尝试了更多的例子(比如这个,这个和这个),但是没有一个是有效的。
4 个解决方案
#1
24
in app config block:
在应用程序配置块:
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);
}
}];
#2
57
For AngularJS >1.3 use $httpProvider.interceptors.push('myHttpInterceptor');
对于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');
}])
#3
8
I don't know why, but response with 401 error goes into success function.
我不知道为什么,但是响应401 error进入成功函数。
'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);
}
#4
7
AngularJS interceptors only work for calls made with the $http service; if you navigate to a page that returns a 401, AngularJS never even runs.
AngularJS拦截器只适用于使用$http服务进行的调用;如果导航到返回401的页面,AngularJS甚至不会运行。
#1
24
in app config block:
在应用程序配置块:
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);
}
}];
#2
57
For AngularJS >1.3 use $httpProvider.interceptors.push('myHttpInterceptor');
对于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');
}])
#3
8
I don't know why, but response with 401 error goes into success function.
我不知道为什么,但是响应401 error进入成功函数。
'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);
}
#4
7
AngularJS interceptors only work for calls made with the $http service; if you navigate to a page that returns a 401, AngularJS never even runs.
AngularJS拦截器只适用于使用$http服务进行的调用;如果导航到返回401的页面,AngularJS甚至不会运行。