angularjsで定義されていないオブジェクト

Question

私はangularjsを終了しました。私はそれに認証サービスを持つファクトリサービスを作成しました。認証が成功すると、ダッシュボードサービスに必要なトークンが生成されます。私はトークンを生成することができますが、それを使用する方法を理解していません。

は、必要なので、私はコントローラに注入しなければならないトークンを取得するために工場サービスを作成することをお勧めしますか？

ご協力いただきありがとうございます。ありがとうございました。

login.htmlと：

<div ng-app="loginFormApp" ng-controller="loginFormCtrl"> 

         <form method="post" action="" id="login_form" class="row"> 
          <input type="text" placeholder="Login ID" ng-model="loginId" > 
          <input type="password" placeholder="Password" ng-model="password" > 
          <input type="button" class="btn btn-theme" ng-click="loginCall()" value="Login"> 
          <input type="button" class="btn btn-theme" ng-click="loginCall()" value="Register Here"> 
         </form> 
        </div> 

私のコントローラと工場出荷時のサービス：（authService.js）

var app = angular.module('loginFormApp', []); 
app.controller('loginFormCtrl', function ($scope, AuthService) { 
    $scope.loginCall = function() { 
     var token= AuthService.authentication($scope.loginId, $scope.password); 
     alert(token); 

    }; 
}); 

app.factory('AuthService', function ($http) { 
    return { 
     authentication: function (UserName, Password) { 
      $http.post("http://103.19.89.152:8080/ccp-services/authenticate", { 
        'userName': UserName, 
        'password': Password 
       }) 
       .then(function (response) { 
         window.location.href = "http://192.168.1.144:2000/angular/dashboard.html"; 
         var getToken = response.data.httpHeaders.h5cAuthToken; 
         // alert(token); 

        }, 
        // Error Handling 
        function (response) { 
         console.log(response.datas); 
        }); 
     } 

    } 
}); 

Answer 1

$ http.postがa promiseを返すため、このコードは機能しません。

var token = AuthService.authentication($scope.loginId, $scope.password); 

まず、以下に示すように$ http.postメソッドを返す必要があります。 then方法で

return $http.post(// rest of code 

$http.postした後、あなたはトークンを返す必要があります。

.then(function (response) { 
    window.location.href = "http://192.168.1.144:2000/angular/dashboard.html"; 
    return response.data.httpHeaders.h5cAuthToken; //return token 
}, 

そして、あなたのコントローラでのログイン・コールは

AuthService.authentication($scope.loginId, $scope.password).then(function(token) { 
    alert(token); 
}); 

アップデート1でなければなりません：あなたはAPI呼び出しにアクセストークンを再利用できるようにしたい勿論

アクセストークンを再利用認証コールの後にこれは次のようにして行うことができます。呼び出し元のメソッドにアクセストークンを返す代わりに、サービス自体の内部にトークンをキャッシュすることができます。ダッシュボードコントローラで

app.factory('AuthService', function ($http) { 
    var cachedToken; // this is where the token will be saved after authentication 
    return { 
     authentication: function (UserName, Password) { 
      $http.post("http://103.19.89.152:8080/ccp-services/authenticate", { 
       'userName': UserName, 
       'password': Password 
      }) 
      .then(function (response) { 
       window.location.href = "http://192.168.1.144:2000/angular/dashboard.html"; 
       cachedToken = response.data.httpHeaders.h5cAuthToken; // save token to 'cache' 
       return cachedToken 
      }, 
      function (response) { // Error Handling 
       console.log(response.datas); 
      }); 
     }, 
     getToken: function() { // new method to retrieve the cached token 
      return cachedToken; 
     } 
    } 
}); 

、あなたがトークンを取得することができます。

AuthService.getToken(); 

勿論、あなたは（それ以外の場合は、あなたがundefinedを取得します）トークンが実際に検索されたかどうかを確認するために、追加のコードが必要です。

Answer 2

$ http.postは非同期呼び出しますので、あなたは、トークン変数を取得するためにコールバックを使用する必要があります認証関数はそれを返しません。

Answer 3

以下の工場を使用してください。私は$ httpコールでリターンを追加しました。

app.factory('AuthService', function ($http) { 
return { 
    authentication: function (UserName, Password) { 
     return $http.post("http://103.19.89.152:8080/ccp-services/authenticate", { 
       'userName': UserName, 
       'password': Password 
      }) 
      .then(function (response) { 
        window.location.href = "http://192.168.1.144:2000/angular/dashboard.html"; 
        var getToken = response.data.httpHeaders.h5cAuthToken; 
        // alert(token); 

       }, 
       // Error Handling 
       function (response) { 
        console.log(response.datas); 
       }); 
    } 

} 

}）;