Choose the appropriate application architecture to handle bearer tokens

Question

I want to use an API that uses OAuth 2.0

In short, I need to obtain an access token that I must include with every subsequent request so that the server can confirm my identity.

What would the architecture look like to do this in an application? Can anyone recommend an article?

Currently, I am inefficient in getting a new token from the API on every request to perform the request.

Is there a best practice for saving a bearer token and reusing it until it expires?

I want to use Vue.js in my application.

Answer 1

As you said, it doesn't make sense to request a new token on every request.

After logging in, the best approach is to store the returned token in localStorage, so the application will get the Bearer from storage regardless of whether the user refreshes the browser.

After completing this, you should append a currently valid Bearer token to every axios request. IE:

axios.defaults.headers = {
    common: {
        'X-Requested-With': 'XMLHttpRequest',
        'Access-Control-Allow-Origin': '*',
        'Authorization': 'Bearer ajsyHjdjkakl;ds......'
    }
}

FYI, there are a lot of packages that can help you deal with this, otherwise, be prepared for some headaches. I personally have been using this since a long time ago: https://websanova.com/docs/vue-auth/首页