How to set access_token to API client's headers and keep it in actual state after refreshing

[zablik]

In order to access an API a need to add the current JWT token to API client's default headers.
oidcStore module has an API to get access_token, it is oidcAccessToken getter.

So my question is how can I call this oidcAccessToken getter inside userLoaded event callback?
Maybe there is a better place to set this header?
Is there an event to handle access_token change?

Thanks!

// In my `store/index.js`

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    oidcStore: vuexOidcCreateStoreModule(
      oidcSettings,
      {
        namespaced: true
      },
      {
        userLoaded(user) {
           // set access_token
          axios.defaults.headers.common['Auth-Token'] = ... ;
        },
        userUnloaded() {
           // delete access_token
           axios.defaults.headers.common['Auth-Token'] = null;
        }
      }
    )
  }
});

[perarnborg]

Inside of the userLoaded event listener you do not need to get the access token from the store, since you have it on the user object.

        userLoaded(user) {
           // set access_token
          axios.defaults.headers.common['Auth-Token'] = user.access_token;
        },

[zablik]

@perarnborg Thanks! Will this work on silent token refresh?

And sorry for the duplicates. Github sent me 404 on my submit attempts, I thought no issue was created :-)

[perarnborg]

Yes, it should!

No worries!