1

How can I set JWT token in headers?

I'm sending the username and password through AJAX call, and receiving the response 200 with JWT token. I'm setting that token in the session storage. How can I set it in headers to check that token exists until the end of the session?

Was my approach correct? Send credentials in body > receive response (success) >login successful> store the token in session storage and set token it in headers> logout when session get expired

function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var data = {
    username: username,
    password: password
}
console.log(data);
$.ajax({
    type:"post",
    cache:false,
    url:"xyz",
    data:data,    /
    success: function (result) {
    console.log(result); //will have the status and jwt if it's success               
     }
    });
  };

storing the jwt

let key="token";
sessionStorage.setItem(key, jwt);// will get the jwt from the result.
Manoj Mvvs
  • 55
  • 1
  • 1
  • 11

2 Answers2

0

You can set an item in sessionStorage using setItem:

sessionStorage.setItem("key", "value");

If you want to check whether a key has been set in sessionStorage, you can check whether it is truey, like:

if (sessionStorage.getItem("key")) {
    //Your code here
}

This is how you can check whether a key exists in sessionStorage and you can apply this inside a script tag which is inside the head tag to check whether the user has been logged in.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • you mean – Manoj Mvvs Sep 15 '18 at 12:47
  • Why putting it in `` ? – mrid Sep 15 '18 at 12:51
  • Can you please explain it clearly? Actually i need that token value till the session exists – Manoj Mvvs Sep 15 '18 at 12:52
  • The sessionStorage will be cleared on exit browser, if your notion of session is "till when the browser is open" - it's ok. Otherwise, I think localStorate is more suitable, however you need to check for support in some browsers. – Dimitar Sep 15 '18 at 13:05
  • @Dimitar sessionStorage was mentioned as a preference in the question. – Lajos Arpad Sep 15 '18 at 13:22
  • @ManojMvvs is closing the browser intended to end the session? – Lajos Arpad Sep 15 '18 at 13:24
  • @ManojMvvs I also do not know what is not clear here. var foo = sessionStorage.getItem("bar") will store this into a variable you can use anytime. And upon logout you can just call removeItem to remove the item from the sessionStorage and set all variables where you stored this value into to undefined. – Lajos Arpad Sep 15 '18 at 13:41
  • @LajosArpad As I have gone through some documentation it was mentioned that the token value should be sent in headers on every request. But how can i set that value to header on every request ? for example like should i pass headers: { 'Content-Type': undefined, 'Authorization': token } on every api call? – Manoj Mvvs Sep 15 '18 at 17:35
  • 1
    @ManojMvvs, yes that's right. Once you get a token, you send it in headers along with each request you make. And when the token expires, you'll need to request a new one – mrid Sep 16 '18 at 05:38
0

You might want to use cookies instead.

document.cookie = "token=" + key + "; expires=0;";

Cookies are aready sent from the user with every request, so it is much more simple to code and by setting the "expires" property to 0 the token will expire once the brower session ends.

Trobol
  • 1,210
  • 9
  • 12
  • Are you sure you would want to store jwt token in cookies ?? – mrid Sep 15 '18 at 12:54
  • 1
    Be sure that you have implemented Cross Site Request Forgery protection before using any cookie-based storage. See [this answer](https://stackoverflow.com/a/37635977/215552) by [MvdD](https://stackoverflow.com/users/18044/mvdd) on [JWT vs cookies for token-based authentication](https://stackoverflow.com/q/37582444/215552). – Heretic Monkey Sep 15 '18 at 13:01