来自静态文件的 Angular 用户 JSON 请求

Question

我目前正在尝试实现这个 AngularJS 示例 Tutorial Example Login，但我没有将用户名和密码存储为 字符串，而是尝试从本地文件中提取。

我知道这是一种不好的做法，但我就是这样做的。

在示例中的AngularJS Authentication Service. Path: /modules/authentication/services.js部分中，用户名和密码存储在超时函数中：

$timeout(function(){
var response = { success: username === 'test' && password === 'test' };
  if(!response.success) {
      response.message = 'Username or password is incorrect';
     }
       callback(response);
}, 1000);

但我正在尝试创建一个静态 json 文件，该文件将用户名和密码作为对象保存。我的想法是向文件发出 $http.get 请求并将 json 对象附加到用户名和密码参数，如下所示：

var details;
$http.get("data.json").then(function(response){
$scope.details = response.data;
    console.log(username);
});


$timeout(function () {
var response = { success: username === details.username && password === details.password 
if (!response.success) {
   response.message = 'Username or password is incorrect';
}
 callback(response);
}, 1000);

但我收到两个错误：
1.ReferenceError: $scope is not defined
2.TypeError: Cannot read property 'username' of undefined

实现我想要做的最简单的方法是什么？提取 来自 json 文件的用户名和密码，而不是将它们作为静态文件 字符串？

Answer 1

一些sn-ps来自http://jasonwatmore.com/post/2014/05/26/angularjs-basic-http-authentication-example

现场演示：http://plnkr.co/edit/WvOwk1?p=preview

我改变了什么？

原来的登录sn-p是：

service.Login = function (username, password, callback) {
    $timeout(function(){
        var response = { success: username === 'test' && password === 'test' };
        if(!response.success) {
            response.message = 'Username or password is incorrect';
        }
        callback(response);
    }, 1000);
};

我改成：

var promise = $http.get("data.json").then(function (response) {
    return response.data;
});

service.Login = function (username, password, callback) {
    promise.then(function (data) {
        var success = data.some(function (user) {
            if (user.username == username && user.password == password) {
                callback({
                    success: true
                });
                return true;
            } else {
                return false;
            }
        });
        if (!success) {
            callback({
                success: false,
                message: 'Username or password is incorrect'
            });
        }
    });
};

并添加了一个data.json：

[{
    "username": "test",
    "password": "test"
}, {
    "username": "test2",
    "password": "test2"
}]

为什么要承诺？

由于您使用 json 文件作为 db，您应该使用网络加载 json 文件。而且您不需要加载 data.json，因为它不会更改，因此您只需加载一次即可。使用promise.then确保验证在$http.get之后。

如果您想在用户每次提交表单时加载“data.json”，只需将promise.then替换为

$http.get("data.json").then(function (response) {
    return response.data;
}).then

Answer 2

检查这个例子：

.controller('NameOfYourController', function($scope, $http,  $timeout) {
    $scope.details = ""; // you can even omit the declaration here 
    $http.get("data.json").then(function(response){
        $scope.details = response.data;
        console.log($scope.details.username); // or response.data.username   
        $timeout(function () {
          // you get to the response obj using: response.data.your_object
          // $timeout logic goes here
        }, 1000);
    });
});

注意：如果您在服务中，则没有 $scope

Answer 3

我不完全确定为什么 $scope 在您的示例中未定义。您很可能不会像使用$http 或$timeout 那样注入它。另一种可能性是您试图在控制器以外的其他东西中使用$scope。

至于您的第二个错误，details 未定义，因为它是在解决 .then() 承诺之后设置的。您可能希望将您的 $timeout 逻辑移动到该代码块中，如下所示：

var details;
$http.get("data.json").then(function(response){
    $scope.details = response.data;
    // ADD YOUR $timeout LOGIC HERE SO DETAILS IS NOT UNDEFINED
});

Answer 4

查看示例，您是否尝试将读取 json 文件的功能放入 Service 方法中。如果您正在这样做，那么服务中没有可用的 $scope。因此你得到以下错误

ReferenceError: $scope is not defined

在您的代码中，有一个局部变量 details 已定义但未初始化。因此它的值是未定义的。

  var details;

在超时功能中，您尝试访问 details.username

username === details.username

因此你得到以下错误

TypeError: Cannot read property 'username' of undefined

但是，如果您想以最简单的方式进行操作，那么只需将代码放入控制器中，如下所示 this plunker。你应该已经创建了 data.json 文件来运行下面的代码。

'use strict';

angular.module('Authentication')

.controller('LoginController',
    ['$scope', '$rootScope', '$location', 'AuthenticationService','$http','$timeout',
    function ($scope, $rootScope, $location, AuthenticationService,$http,$timeout) {
        // reset login status
        AuthenticationService.ClearCredentials();
         var details;
        $http.get("data.json").then(function(response){
        $scope.details = response.data;
        //alert($scope.details.username);
        });

       function Login(username,password,callback){
            $timeout(function(){
                var response = { success: username === $scope.details.username && password === $scope.details.password };
                if(!response.success) {
                    response.message = 'Username or password is incorrect';
                }
                callback(response);
            }, 1000);
       }

        $scope.login = function () {
            $scope.dataLoading = true;
            Login($scope.username, $scope.password, function(response) {
                if(response.success) {
                    AuthenticationService.SetCredentials($scope.username, $scope.password);
                    $location.path('/');
                } else {
                    $scope.error = response.message;
                    $scope.dataLoading = false;
                }
            });
        };
    }]);

但是如果您想使用相同的控制器并更改服务，请通过 @blackmiaool 找到答案，这绝对是完美的。

实现我想要做的最简单的方法是什么？提取 来自 json 文件的用户名和密码，而不是将它们作为静态文件 字符串？

第一种方法是最简单的方法，但不是标准做法。

第二种方法是您尝试做的正确且标准的方法。

Answer 5

基于以下错误的观察：

1. ReferenceError: $scope 未定义

• 当我们尝试访问 $scope 对象但忘记将依赖项注入控制器时会出现此错误。

  app.controller('MyCtrl', ['$scope', function ($scope) { ... }
  

2。类型错误：无法读取未定义的属性“用户名”

• 您的代码中的username 是什么？
• 您应该使用$scope.details.username 而不仅仅是username。

您的代码应采用如下格式：

angular.module('myApp',[]).controller('LoginController',['$scope', function ($scope) {
    var details;
    $http.get("data.json").then(function(response){
        $scope.details = response.data;
        console.log($scope.details.username);
    });

    $timeout(function () {
        var response = { success: username === $scope.details.username && password === $scope.details.password 
        if (!response.success) {
            response.message = 'Username or password is incorrect';
        }
        callback(response);
    }, 1000);        
}]);