login flow with AngularJS and JWT

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

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

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

edited May 23 '17 at 11:45

Community

1
1

answered Jan 12 '17 at 07:22

Mostafa Omar

167
2
6

Thanks but this is "AJAX" style, meaning you stay on the same page. No ? What I need to do is requesting another complete page like with DOM document.location.href. – Fred Sullet Jan 12 '17 at 09:34
On the client side you don't need special header to navigate to another route/url cause simply you're not doing an http request, you're manipulating the DOM itself and so you can save the token in the memory (rootScope, localStorage, angular service, etc..) once the user logs in and simply do an if check before the routing, for example like this: `if (JSON.stringify(localStorage.getItem('your_saved_token')) !== "null")) document.location.href ='yoursecuredpageurl'; else document.location.href ='yourloginpageurl';` – Mostafa Omar Jan 13 '17 at 18:50
Thanks Mustafa. Will the jet token be included in the request for page 'yoursecuredpageurl' ? Yes if the token is part of the url it self but otherwise ? – Fred Sullet Jan 15 '17 at 17:35
otherwise? No.., cause you're not initiating a request – Mostafa Omar Jan 15 '17 at 20:44
There's only 2 ways to navigate to 'yoursecuredpageurl', 1- Either from the server side which in this case you will only initiate a request with the token and then the server will do the redirection 2- Or you do the redirection on the client side as mentioned before and in this case you don't need to initiate the request which means you only need the token on the client side, that you have it already when the client logged in. But you don't need the token when you do `document.location.href = 'yoursecuredpageurl';` because you're not initiating a request – Mostafa Omar Jan 15 '17 at 20:52

login flow with AngularJS and JWT

1 Answers1