在angularjs中使用工厂进行身份验证服务时未定义的对象

u3r8eeie  于 2023-06-21  发布在  Angular
关注(0)|答案(3)|浏览(108)

我在angularjs中创建了一个工厂服务,其中包含一个身份验证服务。如果身份验证成功,则生成 Jmeter 板服务所需的令牌。我能够生成令牌,但不知道如何使用它。
创建一个工厂服务来获取令牌,以便根据需要注入控制器,这是一个好主意吗?
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);
                     });
         }
         
     }
 });
ve7v8dk2

ve7v8dk21#

这段代码不起作用,因为$http.post返回a promise

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

首先,您应该返回$http.post方法,如下所示。

return $http.post( // rest of code

$http.post之后的then方法中,您应该返回令牌。

.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;
        }
    }
});

在 Jmeter 板控制器中,您可以使用以下命令检索令牌:

AuthService.getToken();

当然,您需要额外的代码来检查是否真的检索到了令牌(否则您将得到undefined)。

x7rlezfr

x7rlezfr2#

$http.post异步调用,所以你必须使用回调来获取token变量,认证函数不会返回它。

q5lcpyga

q5lcpyga3#

使用下面的工厂。我在$http调用中添加了一个return。

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

 }

});

相关问题