JWT auth has only 1 kind of tokens. Access tokens. You do not need special “refresh tokens” as you can use the expired access tokens to refresh and receive a new token.
Set the ttl short to eg. 1 day.
you can refresh your token even after it’s expired with the above route.
Save the token request date: new Date() in your SPA together with the token.
In this case, if an api call is made and the token is expired (more than 24 hours has passed) the api calls won’t work. Therefore: on every API call just do a quick check, if the difference between new Date() and the token request date is bigger than 24 hours or not.
In case more than 24 hours have passed, intercept the api call, first make a “refreshToken api call” → see 3) and then AFTERWARDS make the api call with the refreshed token.
In my case, every API call does this:
let now = new Date();
let diff = getDateDiff(now, state.tokenTimeStamp, 'minutes');
let tokenLifeSpan = 1439; // 1 day - 1 min
if (diff > tokenLifeSpan)
{
if (window.refreshingToken)
{
// this is to prevent an endless loop
console.log('refreshingToken...');
return;
}
window.refreshingToken = true;
console.log(`old Token: ${state.token}`);
console.log(`old Token Date: ${state.tokenTimeStamp}`);
// here I start refreshing the token:
axios.post(apiBaseURL+'refreshToken', {token:state.token})
.then(({data}) => {
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest',
'Authorization': "Bearer " + data ,
};
state.token = data;
state.tokenTimeStamp = new Date();
console.log(`new Token: ${state.token}`);
console.log(`new Token Date: ${state.tokenTimeStamp}`);
window.refreshingToken = false;
// then I do the API call once more, after having made sure the new token is set properly:
dispatch('patch', {id, field, value});
});
console.log('stop here');
return;
}

Now it’s #6 here I’m having trouble with as it’s not manually implemented on each API call. I’m having trouble finding a way to keep this code DRY…

Hello @rstoenescu
Thank you again.
I am absolutely fine about checking Vue router or other external documentation. However the usage of tabs or toolbar buttons is a Quasar philosophy specific question. Tabs have several advantages, like being automatically selected in route navigation, however seems they are unable to attend click events. I just want to stick to framework good practices .

Quasar is a front-end framework. What you are looking for or rather where you should be looking is within the API or backend, which Quasar currently doesn’t have. There are two API wrappers in the works. One for a REST API based on FeathersJS and another for a GraphQL API based on Apollo. They should get you a lot closer to what you are looking for.