Changing axios defaults based on store (vuex)

I’m trying to have axios set default headers, to avoid sending them with each requestm onnce a user is authenticated
Right now I’m storing the JWT token information in a the vuex store
I would like to have the header change to reflect this state object, but If there’s a better way of doing this, please share the knowledge :slight_smile:
Thank you!

Right now my get request looks like this:

const res = await axios.get(/images${payload},{headers:{Authorization:store.state.token}});

You can specify axios config defaults that will be applied to every request.

Combined with a vuex plugin you can update the axios instance config if the store ever changes.

Alternatively, you could instead use an axios interceptor which can add the correct header to each request before it sends, using a vuex store getter to fetch the current value of the header from the store.

If you want to make default headers from state, you can use interceptors