Use of AngularJS Factory for Authentication

Question

New to AngularJS.. I want to build a simple Logon screen using a logon page, utilising a controller (I call it 'AccessCtrl') and service.

I want the controller to make use of a service (I called it 'AuthService'), which will perform the REST call that verifies the username/password, and, will also contain information about the success or failure of that logon attempt.

I want to receive information about the last login attempt (as returned in by the REST call). For now - just a string which I want to show on the logon screen, (eg 'password invalid' or 'account expired', or 'welcome'). I'm making this a property of the AuthService service which I hope to display.

My view, has a form with username, password and a submit button that calls the controller's login() method. I'm not including it here for brevity. I don't think thats where the problem lies.

To start with, I want to capture when the server is down/unavailable, etc, and also report this, using the same service. To start with - all calls will fail,(because I have an invalid url).

The controller is defined like this:

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;
        };
  }]);

My factory service is defined as follows:

.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;
}])

;

The problem is that my invalid message ('Server unavailable with response status...') does not appear in my view.

In stepping through the code, the correct authService function is called, but, this does not seem to be populated into the controller/view.

I have a feeling this is a timing issue, where the controller that is executing

this.message=AuthService.message;

before the call actually comes back from the post - but I'm not sure that is the case or how to fix that.

any help/clues welcome.

thanks.

S

score 0 · Accepted Answer · answered Feb 25 '16 at 01:13

Have you tried something like this?

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

Use of AngularJS Factory for Authentication

1 Answers1