AngularJS $ resource - ユーザー名/パスワードでカスタムヘッダーを設定しますか？

Question

ログインシステムの新しいRESTメソッドを作成して、カスタムヘッダーにユーザーの資格情報を提供したいとします。 AngularJS/ng-resourceを使ってどうすればいいですか？私は以下のコードを試しましたが、問題はフォームからユーザー名/パスワードを取得しようとしたときです（$ scope.vm.username）。ヘッダーの設定でこれを行うと、これは私に「未定義」を与えます。

angular.module('BkSystemApp.controllers', ['ngResource']) 

.controller('LoginController', function($scope, $location, $resource){ 
    //init 
    $scope.vm = {}; 

    function getUserCredentials(){ 
     return ($scope.vm.username + ':' + $scope.vm.password) 
    } 

    //resources 
    var Authentication = $resource('/users/authentication',{},{ 
     login:{ 
      method: 'GET', 
      isArray: false, 
      headers: {'Authentication':btoa(getUserCredentials())} 
     } 
    }); 

    //HTTP methods 
    $scope.login = function(){ 
     Authentication.login(function(data){ 

     });  
    }; 
}) 

Answer 1

$resource.loginメソッドは、メソッド呼び出し時にヘッダ文字列を計算有するように、ヘッダ的な設定は、関数宣言ではなく、関数呼び出しである値を有するヘッダ性を有する必要があります。

//resources 
var Authentication = $resource('/users/authentication',{},{ 
    login:{ 
     method: 'GET', 
     isArray: false, 
     //USE function declaration 
     headers: { 
      'Authentication': 
       function() { 
        return btoa(getUserCredentials()) 
       } 
     } 
     //NOT function invocation 
     //headers: {'Authentication':btoa(getUserCredentials())} 
    } 
}); 

Authentication値loginメソッドが呼び出されるたびに計算される。この方法。

注：XHR GET要求のヘッダーにユーザー名とパスワードを送信することは賢明ではありません。