使用AngularJS Factory进行身份验证

时间:2016-02-25 00:31:02

标签: angularjs authentication service

AngularJS的新功能..我想使用登录页面构建一个简单的登录屏幕,使用控制器(我称之为“访问控制”和服务)。

我希望控制器使用服务(我称之为“AuthService'”),它将执行验证用户名/密码的REST调用,并且还包含有关成功的信息或登录尝试失败。

我希望收到有关上次登录尝试的信息(由REST调用返回)。现在 - 只是我想在登录屏幕上显示的字符串,(例如,密码无效'或者帐户已过期'或者欢迎')。我将此作为AuthService服务的一个属性,我希望能够显示它。

我的观点,有一个包含用户名,密码和提交按钮的表单,该按钮调用控制器的login()方法。为简洁起见,我不在此处。我不认为这就是问题所在。

首先,我想捕获服务器何时关闭/不可用等,并使用相同的服务报告此情况。首先 - 所有调用都将失败,(因为我的网址无效)。

控制器的定义如下:

angular.module('loginApp')
  .controller('AccessCtrl', ['$scope','$http','AuthService', 
    function ($scope,$http,AuthService,Config) {

        this.login =function() {
          var user={user:this.username,password:this.password,otherCredentials:this.otherCredentials} ;

          AuthService.login(user);
          this.message=AuthService.message;
        };
  }]);

我的工厂服务定义如下:

.factory('AuthService', ['$http', function ($http) {
      var authService = {};
      var apiRootUrl="http://somesite.com/urany";

      authService.login = function (credentials) {
        authService.message="";
        $http.post(apiRootUrl+'/login', credentials)
          .then(
            function (response) {
                // populate OK message
                authService.message="Welcome !";
            },
            function (response) {
                // Currently - all calls fail, as the URI is invalid
                // I want to trap this.
                authService.message = "Server unavailable with response status = " + response.status ;      
                return authService;

            },
            function(response) {
                // this is the notify callback function.
                // 
            });
      };

      authService.isAuthenticated = function () {
        // rerurn true or false if previously authenticated
        return true;
      };

      return authService;
}])

问题是我的无效邮件('服务器无法使用响应状态...')未显示在我的视图中。

在单步执行代码时,会调用正确的authService函数,但是,这似乎没有填充到控制器/视图中。

我感觉这是一个计时问题,正在执行的控制器

this.message=AuthService.message;
在电话实际上从帖子回来之前

但是我不确定是这种情况还是如何解决这个问题。

欢迎任何帮助/线索。

感谢。

取值

1 个答案:

答案 0 :(得分:0)

你尝试过这样的事吗?

Angular Service Code:

     //call the service
     AuthService.login(user).then(function(response){//begin call back

    //store the response data message object property returned from the service
    $scope.message = response.message;


      }//end call back