Page reload messes up JWT in authorization header

[conducto]

Hello!

I have implemented JWT authentication with Quasar 1.0.4 using Axios and Vuex following this tutorial: https://pusher.com/tutorials/authentication-vue-vuex

When I have logged into my application successfully I receive a JWT from my backend and store it in Vuex as well as in LocalStorage. But if I do a complete page reload in the browser, the authentication header gets messed up:

In front of the token the string “__q_strn” is prefixed. When I googled for this I only could find a error reporting with an accepted PR on Github from 2017 ( https://github.com/quasarframework/quasar/issues/1199 ) stating that this was fixed.

Did somebody of you experience this kind of behaviour? It seems that Quasar has trouble updating the value in LocalStorage after the page reload.

Thanks for your help!
C.

[patryckx]

@conducto There is something in this tutorial that I do not agree with. Modifying localStorage values ​​through the action. I usually use mutation for these changes.

[ouaR]

@conducto I think you are using LocalStorage helper from quasar. Try to use regular window.localStorage.

[conducto]

@ouaR Thank you! That totally solved it!

Details:
instead of using Quasar’s LocalStorage.set(‘token’, token) is just use window.localStorage.setItem(‘token’, token)

[metalsadman]

If you are using the LocalStorage plugin, you need to use getItem ie. $q.localStorage.getItem('token') function so the quasar prefix won’t be included. https://quasar.dev/quasar-plugins/web-storage#Usage

[conducto]

@metalsadman Great thanks! I should have RTFM and not only rely on the tutorial, I guess…

[waelio]

So that means that storing values using $q.localStorage with winder them inaccessible for others using window.localstorage.getItem ?

[beets]

@waelio It doesn’t make them inaccessible to other code using native local storage, but Quasar uses a custom serialization method to preserve objects that you would have to deal with. I’m sure you can find the code responsible for that in the Quasar codebase, or just don’t use the $q.localStorage helper.