AngularJS 1.6 Upgrade code to login no longer working with REST?

Question

I had a project using AngularJS 1.5.8 and the login method worked as followed:

$scope.login = function() {
    // creating base64 encoded String from user name and password
    var base64Credential = btoa($scope.username + ':' + $scope.password);
    // calling GET request for getting the user details
    $http.get('user', {
        headers : {
            // setting the Authorisation Header
            'Authorization' : 'Basic ' + base64Credential
        }
    }).success(function(res) {
        $scope.password = null;
        if (res.authenticated) {
            $scope.message = '';
            // setting the same header value for all request calling from
            // this application
            $http.defaults.headers.common['Authorization'] = 'Basic ' + base64Credential;
            AuthService.user = res;
            $rootScope.$broadcast('LoginSuccessful');
            $state.go('dashboard');
        } else {
            $scope.message = 'Login Failed!';
        }
    }).error(function(error) {
        $scope.message = 'Login Failed!';
    });
};

This was getting the info from database using spring boot with this Request

@RequestMapping("/user")
    public Principal user(Principal principal) {
        return principal;
    }

The code has to be updated to run on AngularJS 1.6.8 so I've been following tutorials I have found online etc, and now have this:

$scope.login = function() {
    // creating base64 encoded String from user name and password
    var base64Credential = btoa($scope.username + ':' + $scope.password);
    // calling GET request for getting the user details
     $http({
          url: 'user',
          method: 'GET',
          headers : {
                // setting the Authorisation Header
                'Authorization' : 'Basic ' + base64Credential
            }
        })
        .then(function onSuccess(res) {
        $scope.password = null;
        if (res.authenticated) {
            $scope.message = '';
            // setting the same header value for all request calling from
            // this application
            $http.defaults.headers.common['Authorization'] = 'Basic ' + base64Credential;
            AuthService.user = res;
            $rootScope.$broadcast('LoginSuccessful');
            $state.go('dashboard');
        } else {
            $scope.message = 'Login Failed!';
        }
    }, function onError(res) {
        $scope.message = 'Login Failed!';
    });
};

Problem is that I keep getting login failed but the users are in the database, and .success has been deprecated so no idea no idea what I've done wrong help greatly appreciated?

Looks fine to me. What does `res.authenticated` says when you log it?? — lin, Feb 16 '18 at 14:49
Hi Lin thanks for the reply I get an Uncaught ReferenceError as follows VM328:1 Uncaught ReferenceError: res is not defined at :1:13 — JavaProgrammingBeginner, Feb 16 '18 at 15:07
Mhm, have you checked your network tab? Is the request successful? — lin, Feb 16 '18 at 15:35

score 2 · Accepted Answer · answered Feb 16 '18 at 16:48

2

Have a look at this: Why are angular $http success/error methods deprecated? Removed from v1.6?

The success and error methods are doing some work behind the scenes to unwrap the response.data. So you may need to do

if (res.data.authenticated) ....

answered Feb 16 '18 at 16:48

Kyle Lussier

112
1
2

Yep, with `then/catch` you are getting the raw response back. With `success/error` you were just getting the data element back. – Pop-A-Stash Feb 16 '18 at 17:24
this worked thanks for the help Kyle and Pop-A-Stash much appreciated – JavaProgrammingBeginner Feb 16 '18 at 22:16

AngularJS 1.6 Upgrade code to login no longer working with REST?

1 Answers1