login flow with AngularJS and JWT - angularjs

Question

In my webapp, when the main page is requested by a non logged in user, I display a login page (containing only a login form). Then the user inputs its userid and pwd and an AngularJS controller issues a HTTP POST request to /connection which returns a JWT autentification token in case of accepted credentials.
Then I'd like the AngularJS controller to issue a GET on / passing the token in the header so the next loaded page is the main webapp page which the connected user can start to play with.
How do I acheive that with AngularJS. Should I use $document.location.href ? If yes how can the token set into the HTTP header ?
Thanks

Answer 1

You can Do it in 2 ways:
1-Use Custom Header for all the initiated Requests (doesn't matter get, post, etc..) and in here our friends posted a lot of different Approaches.
AngularJS $http custom header for all requests
2-Overriding the Header for the Request like this:
$http.get(/*The Call URL*/'http://myawesomeurl/jsondata',/*Configuration Object*/
{/*Overriding the header of the request*/
headers: {
'Content-Type': 'application/json',//request content type
'Authorization': 'token d2VudHdvcnRobWFuOkNoYW5nZV9tZQ=='//Token parameter
//,'myAwesomeHeaderParam':'the header is all yours, add or remove anything'
}
})
.success(function (data, status, headers, config) {
console.log(data);//Received data
})
.error(function (data, status, headers, config) {
console.log('Error Status:'+status);
console.log(data);//Any Server Response values in the case of error
});
//Another Way for initiating the request just for your info
/* var reqInfo = {
method: 'GET',//POST, PUT
url: 'http://myawesomeurl/jsondata',
headers: {
'Content-Type': 'application/json',//request content type (can be not used)
'Authorization': 'token d2VudHdvcnRobWFuOkNoYW5nZV9tZQ=='//Token parameter
}
//,data:{'myAwesomeParameter':'in case of post or put, etc..'} //Request body
};
$http(reqInfo).success(....*/
And you can know more about the Configuration Object here