angularjs - 身份验证 header

Question

我正在尝试从服务器获取 JSON，并在 header 中使用登录名和密码。

请求中没有凭据。

var app = angular.module("app", []);

app.factory('AuthService', function() {
  var currentUser;
  var login = 'hello@example.com';
  var password = 'hello';

  return {
    //login: function() {

    //},
    //logout: function() {

    //},
    login: login,
    password: password,
    isLoggedIn: function() {
      return currentUser != null;
    },
    currentUser: function() {
      return currentUser;
    }
  };
});

app.run(['$http', 'AuthService', function($http, AuthService) {
  /* Using btoa to do Base64 */
  $http.defaults.headers.common['Authorization'] = 'Basic ' + btoa(AuthService.login + ':' + AuthService.password);
}]);

app.controller('LabController', function($scope, $http){
  $scope.labs = $http.get('http://127.0.0.1:5000/api/v1.0/labs').error(function(data, status, headers, config) {
    //console.log("Data");
    console.log(data);
    //console.log("Headers");
    //console.log(headers());
  });
  window.labs = $scope.labs;
});

这是我在请求 header 中得到的内容。

Host: 127.0.0.1:5000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:28.0) Gecko/20100101 Firefox/28.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://localhost:5000
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Connection: keep-alive
Cache-Control: max-age=0

Answer 1

我宁愿这样写我的代码..

//This is a web service service which includes get and post type calls and also adds the required authentication headers to all the requests
myApp.factory('webService', function ($http,loadingActivity) {
    return{
        postRequest: function (requestUrl, requestData,contentType,successCallbackFn,errorCallbackFn,showLoading) {
            var httpRequest = {method: "POST", url: requestUrl, headers: {'userName':userName, 'password':password, 'Content-Type': contentType}, data: requestData };
            $http(httpRequest).success(function (data, status) {
                    loadingActivity.hide();
                    successCallbackFn(data,status);
            }).error(function (data, status) {
                    loadingActivity.hide();
                    errorCallbackFn(data,status);
            });
        },
        getRequest:function(requestUrl, contentType, successCallbackFn, errorCallbackFn, showLoading){
            var httpRequest = {method: "GET", url: requestUrl, headers: {'userName':userName, 'password':password, 'Content-Type': contentType}};
            $http(httpRequest).success(function (data, status) {
                    loadingActivity.hide();
                    successCallbackFn(data,status);
            }).error(function (data, status) {
                    loadingActivity.hide();
                    errorCallbackFn(data,status);
            });
         }
    }
});

在这里，您可以将用户名和密码替换为您的授权 header 。这段代码经过了很好的测试，我在生产环境中使用它。
在您的 Controller 中简单地注入(inject) webService，然后您可以这样调用..

webService.getRequest(preferences.loginURL+data,"application/json",function(data,status){

},function(data,status){
     showAlert(messages.requestFailedError,"Login Failed!");
},true);