AngularJs + php 身份验证

Question

您好，我开始学习 AngularJs，现在我尝试使用 Angular 和 php 来做我的登录模块，但我遇到了一些问题。我看过很多教程，但没有一个对我有帮助，所以这就是我所拥有的：controllers.js：

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

controllers.controller('loginController', ['$scope', '$http', 'UserService', function(scope, $http, User) {
scope.main = [
    {username: '', password: ''}
]

scope.login = function(){
    var config = {
        url: '../auth/login.php',
        method: 'POST',
        data: {
            username: scope.main.username,
            password: scope.main.password
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }

    $http(config)
    .success(function(data,status,headers,config){
        if(data.status){
            //succefull login
            User.isLogged = true;
            User.username = data.username;
        }
        else{
            User.isLogged = false;
            User.username = '';
        }
    })
    .error(function(data,status,headers,config){
        User.isLogged = false;
        User.username = '';
    });
}
}])

auth.js：

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

services.factory('UserService', [function(){
    var sdo = {
        isLogged: false,
        username: ''
    };
    return sdo;
}]);

login.php：

$username = $_POST['username'];
if($username){
    return "Logged";
}else{
    return false;
}

和html：

<div class="col-xs-12" id="loginCol" ng-controller="loginController">
   <form ng-submit='login()' name="form" novalidate>
      <div class="form-group">
         <label for="username" class="sr-only">Username</label>
         <input type="text" ng-model="scope.main.username" class="form-control" id="username" placeholder="Име..." />
         <label for="password" class="sr-only">Password</label>
         <input type="password" ng-model="scope.main.password" class="form-control" id="password" placeholder="Парола..." />
      </div>

      <div class="form-group pull-right">
         <button type="button" class="btn btn-primary">Login</button>
         <button type="button" class="btn btn-default">Register</button>
      </div>
   </form>
</div>

在这种情况下，我只希望用户在用户名输入中输入内容并点击登录按钮并成功调用 login.php 以返回一些消息。问题是这样写的代码出现错误“'loginController'不是函数，未定义”如何解决？

Answer 1

您已经创建了应用程序

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

但没有在html代码中使用，将ng-app属性添加到wrapper div

<div class="col-xs-12" ng-app="controllers" id="loginCol" ng-controller="loginController">

第二个问题，你试图捕捉提交事件，但不提交表单，使用submit类型而不是button

<button type="submit" class="btn btn-primary">Login</button>

或将ng-click="login()" 属性添加到按钮并从表单中删除ng-submit='login()'

Answer 2

（披露：我是 UserApp 的开发者之一）

您可以尝试第三方服务UserApp，以及AngularJS module。

查看getting started guide，或拨打course on Codecademy。以下是其工作原理的一些示例：

• 带有错误处理的登录表单：

  <form ua-login ua-error="error-msg">
      <input name="login" placeholder="Username"><br>
      <input name="password" placeholder="Password" type="password"><br>
      <button type="submit">Log in</button>
      <p id="error-msg"></p>
  </form>
  

• 带有错误处理的注册表单：

  <form ua-signup ua-error="error-msg">
    <input name="first_name" placeholder="Your name"><br>
    <input name="login" ua-is-email placeholder="Email"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Create account</button>
    <p id="error-msg"></p>
  </form>
  

  ua-is-email表示用户名与邮箱相同。

• 如何指定哪些路由应该是公开的，哪些路由是登录表单：

  $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
  $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
  

  .otherwise() 路由应该设置为您希望用户在登录后被重定向到的位置。示例：

  $routeProvider.otherwise({redirectTo: '/home'});

• 退出链接：

  <a href="#" ua-logout>Log Out</a>

• 访问用户属性：

  使用user服务访问用户信息，例如：user.current.email

  或者在模板中：<span>{{ user.email }}</span>

• 隐藏仅在登录时才可见的元素：

  <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

• 根据权限显示元素：

  <div ua-has-permission="admin">You are an admin</div>

要对您的后端服务进行身份验证，只需使用user.token() 获取会话令牌并将其与 AJAX 请求一起发送。在后端，使用UserApp API 和PHP library 来检查令牌是否有效。

如果您需要任何帮助，请告诉我 :)