What is the best way to update a JWT token in a Vue app?

Question

JSON Web Token

Hello, this is the first time I've come across how to use jwt the way it should be. Before that, I used one non-expiring token in test applications.

The API provides three token routes: create, verify, and refresh. Task: before requests that require a token, check the validity of the token and update it if necessary.

It's technically simple and can be hardcoded quickly, however, the question is, what's the best way to implement this inside a Vue framework? I have a separate api object that contains all the api methods using axios, the login method is stored in vuex, where the api is called and the token is stored in localStorage.

Calling an api method inside another api method doesn't seem very sensible and cumbersome:

const api = {
    verifyToken(token) {
        return api.post('/auth/jwt/verify', { token })
    },
    async verySecurePath() {
        try {
             this.verifyToken()
             // какой то код
        } catch (error) { // какие то обработки }
        return api.get('/v1/very/secure/')
    },
}

The same if you call this check inside the components. There will be a mix.

I saw that it is possible to check with the help of interceptors in axios, but I have not yet figured out how.

I would appreciate any help on the issue.

Answer 1

Why check the token? On logout, it must be removed from localStorage. If it is expired, then you can check in the expire token... Otherwise, write a function that receives the token. Depending on the state of the token, either from localStorage, or refresh, or create.

Answer 2

In my opinion, a separate API method `verifyToken` is overkill. With it, the whole essence of JWT is lost.
The idea of ​​JWT authorization is that the client can verify the authenticity of the token by checking its signature. And if it's authentic, trust its content without additional backend requests.