I am trying to use Amazon Cognito Vuex Module in my Vue.js app and make all axios requests pass the credentials automatically with the following code:

// Add authentication token to each request
axios.interceptors.request.use(async config => {
    const response = await store.dispatch('getUserSession');
if (response && response.accessToken && response.accessToken.jwtToken) {
    config.headers.AccessToken = response.accessToken.jwtToken;
}
    return config;
});

As far as I see, it is a mon code that should be executed for all the ponents probably, but it is not clear where to add it. Probably to App.vue or to index.js? In App.vue I have:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';

    Vue.use(Vuetify);
    Vue.use(VueRouter);

export default new Vue({}).$mount('#app');

in index.js:

export default new Vuex.Store({
  state: {
  ...

I am trying to use Amazon Cognito Vuex Module in my Vue.js app and make all axios requests pass the credentials automatically with the following code:

// Add authentication token to each request
axios.interceptors.request.use(async config => {
    const response = await store.dispatch('getUserSession');
if (response && response.accessToken && response.accessToken.jwtToken) {
    config.headers.AccessToken = response.accessToken.jwtToken;
}
    return config;
});

As far as I see, it is a mon code that should be executed for all the ponents probably, but it is not clear where to add it. Probably to App.vue or to index.js? In App.vue I have:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';

    Vue.use(Vuetify);
    Vue.use(VueRouter);

export default new Vue({}).$mount('#app');

in index.js:

export default new Vuex.Store({
  state: {
  ...

• javascript
• vue.js
• axios
• vuetify.js
• vuex

2 Answers 2

you could use it as in the code below but before doing that you have to install these modules :

 npm i --save axios vue-axios vuex

code :

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import Vuex from 'vuex';
import axios from 'axios';
import VueAxios from 'vue-axios';
import store from './index'
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(VueAxios, axios);

export default new Vue({
 store,
  mounted(){
    axios.interceptors.request.use(async config => {
     const response = await store.dispatch('getUserSession');
       if (response && response.accessToken && response.accessToken.jwtToken) {
          config.headers.AccessToken = response.accessToken.jwtToken;
       }
    return config;
     });
  }
  }).$mount('#app');

here you call store instead of $store because the variable is declared above (import store from './index') but in child ponents you must use this.$store and the this keyword refers to the Vue instance

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import Vuex from 'vuex';
import axios from 'axios';
import VueAxios from 'vue-axios';
import store from './index'
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(VueAxios, axios);

export default new Vue({
 store,
  created(){
    axios.interceptors.request.use(async config => {
     const response = await store.dispatch('getUserSession');
       if (response && response.accessToken && response.accessToken.jwtToken) {
          config.headers.AccessToken = response.accessToken.jwtToken;
       }
    return config;
     });
  }
  }).$mount('#app');

should use created