Odtnhj

I have a simple multi-page site written in vanilla JS, Pug, and Node, that uses login with JWT. When a user logs in, the client is returned a JWT. The JWT is stored in localStorage. Now, when a user clicks a link to a protected route on a given page, I need to send the JWT to the server so it can authenticate that the JWT is valid (i.e., user is logged in).

I understand I can do something like this for a given protected route:

$.ajax(
 url: "/protected",
 type: "GET",
 headers: 
 'Authorization': 'Bearer ' + <token>
 
 success: (res) => 
 if (res.status == 200) 
 window.location.replace("/profile");
 
 else 
 window.location.replace("/login");
 
 ,
 error: (err) => console.log(err) 
 );

It seems like a lot of overhead for a simple link click. Is this the recommended method of adding a JWT to a request header or is there a better way?

Yes, pretty much this is the only way. But to simplify your things you can create a wrapper on above ajax method and use that function for protected routes.

function authAjax(url, method, successCallback, errorCallback)
 $.ajax(
 url: url,
 type: method,
 headers: 
 'Authorization': 'Bearer ' + <token>
 
 success: (res) => 
 if (res.status == 200) 
 successCallback(res)
 
 else 
 window.location.replace("/login");
 
 ,
 error: (err) => 
 console.log(err) 
 errorCallback(err)
 
 );

And use this like:

authAjax('/protected', 'GET', (data) => 
 console.log('API res', data)
, (err) => 
 alert('Sorry, Something went wrong :(')
)