title: Where to call axios.interceptors.request.use in a Vue.js app?
body: <p>I am trying to use <a href="https://www.npmjs.com/package/amazon-cognito-vuex-module" rel="nofollow noreferrer"><code>Amazon Cognito Vuex Module</code></a> in my Vue.js app and make all <code>axios</code> requests pass the credentials automatically with the following code:</p>
  
  <pre><code>// Add authentication token to each request
  axios.interceptors.request.use(async config =&gt; {
      const response = await store.dispatch('getUserSession');
  if (response &amp;&amp; response.accessToken &amp;&amp; response.accessToken.jwtToken) {
      config.headers.AccessToken = response.accessToken.jwtToken;
  }
      return config;
  });
  </code></pre>
  
  <p>As far as I see, it is a common code that should be executed for all the components probably, but it is not clear where to add it. Probably to <code>App.vue</code> or to <code>index.js</code>? In <code>App.vue</code> I have:</p>
  
  <pre><code>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');
  </code></pre>
  
  <p>in <code>index.js</code>:</p>
  
  <pre><code>export default new Vuex.Store({
    state: {
    ...
  </code></pre>