使用AngularJS在JSON响应期间解析问题

Question

我是使用Angularjs的新手，我在解析JSON响应时遇到问题。我有Username和password等登录凭据，当用户点击登录button()时，我正在尝试解析它。如果在以下服务器中匹配的名称和密码，我应该获得成功消息。这是我正在使用的HTML代码：

<form ng-submit="loginform()" name="logform"><br/><br>
<tr ng-repeat="logcred in signinfo"></tr>

<div>
 <label form="emailinput"><b>Email</b></label>
 <input type="email" class="form-control" name="uname" id="emailinput" placeholder="you@example.com" ng-model="logcred.username" >
</div>

<div>
  <label form="pwdinput"><b>Password</b></label>
  <input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="logcred.password">
</div>

<a ng-click="reloadPage()" class="navbar-brand" ></a>

<div>
 <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
 <button class="btn btn-primary" ng-click="submit()" >Login</button>
</div>
</form>

这是使用AngularJS的Javascript代码：

app.controller('credientials', function($scope,$http) {
$scope.loginform = function (username, password){
$http.get('http://localhost:3000/loginfo')
.then(
    function successCallback(data){
    $scope.response = data;
if($scope.username === 'response.username' && $scope.password === 'response.password'){
    $scope.signinfo = data.loginfo;
}
else{
    console.log("Error");
    }
})
});

HTML显示变量$ scope.response和服务器返回的JSON，但我不知道如何正确认证它。

我做错了什么？

非常感谢任何帮助/建议。

Answer 1

修改

在客户端检查更新的身份验证片段。

if(userData.username == response.data.username && userData.password === response.data.password){
      $scope.signinfo = response.data 
}

您将从表单提交按钮获取userData变量..看看我如何通过  使用ng-submit="loginform(logcred)"的控制器的用户名和密码

＆＃13;

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('credientials', function($scope, $http) {
  $scope.loginform = function(userData) {
    console.log(userData);
    $http.post('https://reqres.in/api/users', userData) // here in post rew i am passing username and password to mock api
      .then(function(response) {
       //as suggested by you in response u will get username = admin@evol.com password = admin;   
        console.log(response)
        if(userData.username == response.data.username && userData.password === response.data.password){
            $scope.signinfo = response.data 
        }
      });
  }
});

//**NOTE** in above HTTP call you use your url `http://localhost:3000/loginfo` and in your serverside get the username from the request and check password for that username in your database. If password matches with what you have entered then send  success message or user details back to client side.

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="credientials">
  <form ng-submit="loginform(logcred)" name="logform">
    <br/>
    <br>
   {{signinfo}}

    <div>
      <label form="emailinput"><b>Email</b></label>
      <input type="email" class="form-control" name="uname" id="emailinput" placeholder="you@example.com" ng-model="logcred.username">
    </div>

    <div>
      <label form="pwdinput"><b>Password</b></label>
      <input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="logcred.password">
    </div>

    <a ng-click="reloadPage()" class="navbar-brand"></a>

    <div>
      <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
      <button class="btn btn-primary">Login</button>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

在上面的HTTP调用中，您使用您的网址http://localhost:3000/loginfo，并在您的服务器端获取请求中的用户名并检查数据库中该用户名的密码。如果密码与您输入的密码匹配，则将成功消息或用户详细信息发送回客户端。

如果条件匹配用户凭据，我应该在哪里申请？

您需要检查服务器端逻辑中是否有条件从数据库中获取数据。比如在你的服务器上（即在/ loginfo中）

if(userpassword == passwordfromDB){
  //send success message to client side
}