Vuex action is not adding state value to axios api call

I am using flask as my backend server. vuex action is not setting token from local storage state to Axios API call. Please help me with what am I missing. currently I am stuck here, this is related to my previous question which I dint get answer so posting again… Below is my vuex store code:

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    // accessToken: JSON.parse(localStorage.getItem('access_token')) || null,
    // refreshToken: JSON.parse(localStorage.getItem('refresh_token')) || null,
    accessToken: localStorage.getItem('access_token') || null,
    refreshToken: localStorage.getItem('refresh_token') || null,
    APIData: '',
  },
actions: {
refreshToken(context) {
      return new Promise((resolve, reject) => {
        console.log(context.state.refreshToken);
        getAPI.post('/refresh', {
          // refresh_token: context.state.refreshToken,
          headers: { Authorization: `Bearer ${context.state.refreshToken}` },
        })
          .then((response) => {
            console.log('New access token granted');
            context.commit('updateAccessToken', response.data.access_token);
            console.log(context.state.accessToken);
            resolve(response.data.access_token);
          })
          .catch((error) => {
            console.log('\'error in refresh:\'', error);
            reject(error);
          });
      });
    },
}

I’m not sure what the issue could be but I would use getters for this and set the value directly in the local storage object,

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    APIData: '', 
  },
  getters: {
    accessToken: () => localStorage.getItem('access_token') || null,
    refreshToken: () => localStorage.getItem('refresh_token') || null,
  },
  actions: {
    refreshToken(context) {
      const payload = { headers: { Authorization: `Bearer ${context.getters.refreshToken}` }
      
      return new Promise((resolve, reject) => {
        console.log(context.getters.refreshToken);
        getAPI.post('/refresh', payload }).then((response) => {
          console.log('New access token granted');
          localStorage.setItem('access_token')
          context.commit('updateAccessToken', response.data.access_token);
          console.log(context.getters.accessToken);
          resolve(response.data.access_token);
        }).catch((error) => {
          console.log('\'error in refresh:\'', error);
          reject(error);
        });
      });
    },
  }
});

Moving token variables to getters gave me error and routing dint work. Any alternative way of you think, I provided my complete code in stackoverflow link.

Sorry I had typos missing one or two braces. Here’s a working example.

Nope :), it is not working. after making changes to your code my code basic functionality broke :slight_smile: . Please provide me an alternative. may be i was thinking parsing it to json before passing to axios call !

In your SO code you have this…

store.dispatch('refreshToken')
          // eslint-disable-next-line camelcase
          .then((access_token) => {
            axios.request({
              headers: { Authorization: `Bearer ${this.$store.state.accessToken}` },
            });
            console.log(access_token);
          });

The Authorization header is referencing this.$store.state.accessToken, however this is a module, not a Vue instance and therefore it will always return undefined.

Maybe this is just an oversight, but seeing as you are getting the access_token in the function parameter, then you should just use that.

store.dispatch('refreshToken')
          // eslint-disable-next-line camelcase
          .then((access_token) => {
            axios.request({
              headers: { Authorization: `Bearer ${access_token}` },
            });
            console.log(access_token);
          });

Additionally, and seperate from your issue, in your refreshToken method, you don’t need to wrap your Axios call in a Promise. It’s already a Promise. Just return the Axios Promise itself.

1 Like

bull’s eye.

I corrected that but, the issue occurs in vuex store refreshToken method. refreshToken method axios post call is empty.

You need to give us more to go on to help you properly… you say the post call is empty. What do you mean by this? Is it the post request header that is empty? Is it the response data that is empty? If you view your Vuex store in devtools, do you see the expected data?

I Mean my post call header is empty. And when i see vue dev tools, tokens are present in state.