使用 Angularjs 获取令牌

Question

我正在开发 Angularjs + Moodle + WebService APP

我做了一点登录页面，有一个问题。

我正在通过 $.ajax 获取我的用户的令牌，我可以在我的 chrome 控制台中看到它。

问题是，我想保存该令牌以便在 WS moodle 函数中使用它，我正在使用 JSON.strungify 获取令牌，但我没有成功。

我只是得到 -> {readystate: 1} 作为警报，而不是得到一个令牌。但在我的 console.info(response); 中，我得到了令牌，如下图所示：

这是我的代码：

controller.js

var app = angular.module('mainApp', ['ngRoute', 'toaster', 'ngAnimate']);

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'login.html'
    })
    .when('/dashboard', {
        resolve: {
            "check": function($location, $rootScope) {
                if(!$rootScope.loggedIn){
                    $location.path('/');
                } 
            }
        },  
        templateUrl: 'dashboard.html'   
    })
    .otherwise({
        redirectTo: '/'
    });
});


app.controller('loginCtrl', 

function($scope, $location, $rootScope) {
    $scope.submit = function() {
        /*if($scope.username == 'admin' && $scope.password == 'admin') {
            $rootScope.loggedIn = true;
            $location.path('/dashboard');
        } else {
            alert('Wrong Stuff');
        }*/
        $rootScope.loggedIn = true;
        var username = $scope.username;
        var password = $scope.password;
        postCredentials(username, password/*, createSession*/);

    };

    function postCredentials(username, password, callback) {
    if (username!==null || password!==null) {


        var serverurl = 'https://comunidaddeaprendizaje.cl/ac-cap/login/token.php';

         var data = {
             username: username,
             password: password,
             service: 'moodle_mobile_app' // your webservice name
         }

         var response = $.ajax(
                            {   type: 'POST',
                                data: data,
                                url: serverurl,
                                dataType: 'JSON'
                            }
                         );

        console.info(response);
        dataString = JSON.stringify(response);
        alert(dataString);

             if (dataString.indexOf('error') > 0) {
               alert('Invalid user credentials, please try again');
             };

         } else {
            alert('Something Wrong');
         }
     }

}

);

login.html

div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">Home</a>
        </li>
        <li class="active">Login</li>
    </ul>
</div>

<div class="page-content">

<div class="row">
<div class="space-6"></div>
<div class="col-sm-10 col-sm-offset-1">
    <div id="login-box" class="login-box visible widget-box no-border">
        <div class="widget-body">
        <div class="widget-main">

        <h4>Login ACCAP</h4>

            <div ng-controller="loginCtrl">
            <form action="/"  class="form-horizontal" id="myLogin">
            <div class="form-group">
                UserName: 
                <input type="text" class="form-control" id="username" ng-model="username" required focus><br>
                Password:  
                <input type="password" class="form-control" id="password" ng-model="password"  required>
                </br>
                <button type="button" class="width-35 pull-right btn btn-sm btn-primary" ng-click="submit()">
                <div class="col-sm-7">
                <i class="ace-icon fa fa-key"></i>
                Login
                </button>
                </div>
            </div>
            </form>
            </div>

         </div>
        </div>
    </div>
</div>
</div>
</div>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Login APP</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.7/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
    <script src="controller.js"></script>
</head>
<body ng-app="mainApp">
    <div ng-view></div>
</body>
</html>

感谢您的帮助！

Answer 1

response 变量是一个对象，其中包含有关响应的大量信息。它与您的回复文本不同。
您的第二个错误是您的 AJAX 调用是异步的，因此您无法在 AJAX 调用后立即获得响应。您需要等待回复。而不是

var response = $.ajax({
  type: 'POST',
  data: data,
  url: serverurl,
  dataType: 'JSON'
});
console.info(response);
dataString = JSON.stringify(response);
alert(dataString);
if(dataString.indexOf('error') > 0) {
  alert('Invalid user credentials, please try again');
};

你应该写

var response = $.ajax({
  type: 'POST',
  data: data,
  url: serverurl,
  dataType: 'JSON',
  success: function(response) {
    console.info(response);
    dataString = JSON.stringify(response);
    alert(dataString);
    if(dataString.indexOf('error') > 0) {
      alert('Invalid user credentials, please try again');
    };
  }
});

使用 Angularjs 获取令牌

Get token with Angularjs

javascript

jquery

moodle

token

angularjs