angularjs: $http 基本认证

Question

我尝试了 angular.js 并从 web-ui 开始 restful api（使用 http 基本身份验证）。真的很不错，除了授权都有效。

到现在为止我都是用$http.defaults.headers.common.Authorization来设置密码，但是大多数情况下浏览器打开他默认的login-form为http-basic-auth。另一个奇怪的行为是 angular-request 不包含 Authorisation-Header（OPTIONS 和 GET-request 都不包含）。我还尝试使用 header-config 在每个请求上设置此 header，但这也没有用。

我需要设置一些特殊的 header 吗？或者我必须在特殊情况下设置 $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
      }
    });
  };

请求header:

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

回应header：

后端稍作修改以支持 CORS（Access-Control-headers 和 preflight-request-support）。

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

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');
}]);

Answer 2

您在登录表单中描述的问题在 AngularJS Tips and Tricks Using ngResource 中有解决方法。请参阅基本身份验证部分：

A workaround, if appropriate, is to tell your web server to return something other than 401 on an authentication failure, and go from there. In AngularJS, a 500 (for example) will cause the $http promise to be rejected and you can handle it however you’d like. This is not recommended if you actually ever need the login prompt to occur!

angularjs: $http 基本认证

angularjs: $http basic authentication

angularjs

http-authentication

basic-authentication

angularjs-http

请求header:

回应header：