AngularJS: $http基本身份验证

Question

我尝试使用angular.js创建一个基于web-ui的restful api（使用http basic auth）。除了授权之外，它真的很好。到目前为止，我正在使用$http.defaults.headers.common.Authorization来设置密码，但是大多数情况下，浏览器会打开其默认的http-basic-auth登录表单。另一个奇怪的行为是，angular请求不包含Authorization头（无论是OPTIONS还是GET请求）。我还尝试使用header-config在每个请求上设置此标头，但这也没有起作用。

是否有一些特殊的标头需要我设置？或者我必须在特定的上下文中设置$http.defaults.headers.common.Authorization？

tools.factory('someFactory', function ($http, Base64) {

  //...

  factory.checkAuth = function (username, password) {
    storeCredentials(username, password);
    factory.initConnection();
    return factory.getData();
  };

  factory.initConnection = function(){
    var credentials = loadCredentials();

    factory.authHeader = 'Basic ' + Base64.encode(credentials.username + ':' + credentials.password);

    $http.defaults.headers.common.Authorization = factory.authHeader;
  };

factory.getData = function () {
    return $http({
      method: 'GET',
      url: urlBase + '/happening',
      headers: {
      //  'Authorization': factory.authHeader
      }
    });
  };

请求头：

OPTIONS /v8/happening HTTP/1.1
Host: api.gospry.com
Connection: keep-alive Access-Control-Request-Method: GET
Origin: http://web.gospry.com
User-Agent: [..] Access-Control-Request-Headers: accept, authorization
Accept: */*
Referer: http://web.gospry.com/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

响应头：

后端稍作修改以支持CORS（Access-Control-headers和预检请求支持）。

HTTP/1.1 401 Unauthorized
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: http://web.gospry.com
Access-Control-Allow-Methods: POST、GET、PUT、PUSH、OPTIONS、DELETE
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: Origin、X-Requested-With、Content-Type、Authorization
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache、no-store、max-age=0、must-revalidate
Pragma: no-cache
Expires: 0
Strict-Transport-Security: max-age=31536000；includeSubDomains
X-Frame-Options: DENY
Set-Cookie: JSESSIONID=2DDC92A1B0DC57C221CDC3B7A5DC1314；Path=/v8/；Secure；HttpOnly
WWW-Authenticate: Basic realm="Realm"
X-Content-Type-Options: nosniff
Cache-Control: no-cache、no-store、max-age=0、must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Allow: GET、HEAD、POST、PUT、DELETE、TRACE、OPTIONS、PATCH
Content-Length: 0
Date: Wed, 08 Apr 2015 18:04:04 GMT

- NaN

Answer 1

我使用一个拦截器。我无法在你的代码中发现问题，但这是我正在使用的：

authModule.factory('CeradAuthInterceptor', 
['CeradAuthManager', function ( authManager) 
{
  return {
    request: function (config) 
    {
      config.headers = config.headers || {};
      if (authManager.authToken) 
      {
        config.headers.Authorization = 'Bearer ' + authManager.authToken;
      }
      return config;
    }
  };
}]);

appModule.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.interceptors.push('CeradAuthInterceptor');
}]);

- Cerad

Answer 2

您所描述的登录表单问题在AngularJS技巧和技巧使用ngResource中有解释和解决方法。请参见基本身份验证部分：

如果合适，一种解决方法是告诉您的Web服务器在身份验证失败时返回401以外的其他内容，然后从那里开始处理。在AngularJS中，500（例如）会导致$http承诺被拒绝，您可以根据需要进行处理。如果您实际上需要登录提示框，则不建议使用此方法！

- Brad Rippe