Angular JS App using REST API

Question

I'm currently trying to intergrate a login API with my angular JS app for authentication.

This is my current login function:

  var $promise = $http.post(API + '/login', {
      username: name,
      password: pw
  });

  $promise.then(function(msg){
    if(msg.data.success == true){
      resolve('Login success.');
    }else{
      reject('Login Failed.');
    }
  });

It's successfully returning when successful, however when I try to GET the settings from the user using the API I'm getting an error for unauthorization.

This is my GET request:

   $http({
       method: 'GET',
       url: API + '/account/settings',
       withCredentials: true
   }).then(function successCallback(response) {
       // SUCCESS
   }, function errorCallback(response) {
       // ERROR
   });

It's really, really puzzling me. I can use Postman to make the API call to login and then GET from the settings, but can't for the life of me get this working.

These are my response headers from the LOGIN request:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:8100
Connection:keep-alive
Content-Length:171
Content-Type:application/json; charset=utf-8
Date:Tue, 20 Dec 2016 21:30:05 GMT
ETag:W/"ab-vCrnhzn26fE4borN6cmpAw"
set-cookie:connect.sid=s%3A1EF4OfHQ2uYb750QvccZB4pnNCyTsAfd.ISmVn3vE5jXjEwmLbtsQK4O339%2Fw74K3Y613f4%2FcTKE; Path=/; HttpOnly
Vary:Origin, X-HTTP-Method-Override, Accept-Encoding

When you get the result back from that login API, do you see any authorization header being added to the response, and if so have you added that to the next request header? — Yaser
– Yaser, Commented Dec 20, 2016 at 21:19
Hey @YaserAdelMehraban, I'm getting a body response back with the success and then I get the following back in the response headers: — Kyran McKay
– Kyran McKay, Commented Dec 20, 2016 at 21:24
HTTP/1.1 200 OK Access-Control-Allow-Origin: localhost:8100 Vary: Origin, X-HTTP-Method-Override, Accept-Encoding Access-Control-Allow-Credentials: true Content-Type: application/json; charset=utf-8 Content-Length: 171 ETag: W/"ab-vCrnhzn26fE4borN6cmpAw" set-cookie: connect.sid=s%3AEtJZCOqfGu4UqZnLGDIfIZXjAYKUQx12.EqyopERh6bEgIawPrtY5Jwqe7HqB5FFBgefqUy%2BSsrk; Path=/; HttpOnly Date: Tue, 20 Dec 2016 21:20:26 GMT Connection: keep-alive — Kyran McKay
– Kyran McKay, Commented Dec 20, 2016 at 21:24
Can you update your post with the response (hard to read in comments). Not sure what kind of server you are using for that API but usually you will need an authorization header which is coming from a successful login, added to the request, take a look at here: oskarhane.com/add-authorization-header-to-angularjs-http — Yaser
– Yaser, Commented Dec 20, 2016 at 21:28
Hey @YaserAdelMehraban, that's updated now. I'm using Drywall on Node and the REST API that is in that. It shouldn't be an issue with the API if I can login successfully with Postman though should it? — Kyran McKay
– Kyran McKay, Commented Dec 20, 2016 at 21:32

Yaser · Accepted Answer · 2016-12-20 21:43:14Z

1

I traced back the server you are using and found a project called ngFrame which consumes almost all of the API's of Drywall, there are samples of authentication as well there.

There is a function called setAuthHeader in the source you can take a look at:

function setAuthHeader(user) {
    $http.defaults.headers.common['Authorization'] = user.authHeader
}

The use which is passed in here is coming from the response of the post to login:

$http.post('/api/login', user).success(function(user) {});

Here is the GitHub page.

answered Dec 20, 2016 at 21:43

Yaser

5,7391 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kyran McKay Over a year ago

Hey, I'm currently using this: github.com/arthurkao/angular-drywall which is the angular version of Drywall which is all setup and working. So are you saying that my login post is wrong? or the response back isn't right?

Yaser Over a year ago

Yap if you take a look at security.js there is nowhere that sets authentication header. Not even in the interceptor they are using for retry unauthorized-server

Kyran McKay Over a year ago

Damn, so it's nothing I can simply edit to get working?

Yaser Over a year ago

I recommend taking a look at the ngFrame and see if you can find an example with that, then search for login issues with angular-drywall

Kyran McKay Over a year ago

Well it's actually working now, I've not changed anything. I'm very confused. Thanks for your help though dude, greatly appreciated.

Collectives™ on Stack Overflow

Angular JS App using REST API

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related