title: Axios interceptor in vue 2 JS using vuex
body: <p>I store token after success login call in vuex store like this:</p>
  
  <pre><code>axios.post('/api/auth/doLogin.php', params, axiosConfig)
      .then(res =&gt; {
          console.log(res.data); // token
          this.$store.commit('login', res.data);
      })
  </code></pre>
  
  <p>axiosConfig is file where I only set baseURL <code>export default { baseURL: 'http://localhost/obiezaca/v2' }</code> and params is just data sent to backend.</p>
  
  <p>My vuex file looks is:</p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  export const store = new Vuex.Store({
      state: {
          logged: false,
          token: ''
      },
      mutations: {
          login: (state, response) =&gt; {
              state.logged = true;
              state.token = response;
              console.log('state updated');
              console.log('state.logged flag is: '+state.logged);
              console.log('state.token: '+state.token);
          },
          logout: (state) =&gt; {
              state.logged = false;
              state.token = '';
          }
      }
  });
  </code></pre>
  
  <p>It is working correctly, I can re-render some of content in my SPA basing on <code>v-if="this.$store.state.logged"</code> for logged user. I'm able to access <code>this.$store.state.logged</code> from any component in my entire app.</p>
  
  <p>Now I want to add my token to every request which call my rest API backend. I've created basic axios http interceptor which looks like this:</p>
  
  <pre><code>import axios from 'axios';
  
  axios.interceptors.request.use(function(config) {
      const token = this.$store.state.token;
      if(token) {
          config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
  }, function(err) {
      return Promise.reject(err);
  });
  </code></pre>
  
  <p>Now I have 2 problems/questions about it.</p>
  
  <ol>
  <li>I know that it is available to use <code>this.$store.state.logged</code> or <code>this.$store.state.token</code> across every component but can I use it same way in single javascript file?</li>
  <li>Where should I execute/start my interceptor javascript file? It is independent file which lays in my app main folder but I am not calling it anywhere, in angularJS which I was working before, I had to add <code>$httpProvider.interceptors.push('authInterceptorService');</code> in config but I don't know how to do same thing in vue architecture. So where should I inject my interceptor?</li>
  </ol>
  
  <p><strong>EDIT</strong></p>
  
  <p>I followed <em>GMaiolo</em> tips I added </p>
  
  <pre><code>import interceptor from './helpers/httpInterceptor.js';
  interceptor();
  </code></pre>
  
  <p>to my main.js file and I refactor my interceptor to this:</p>
  
  <pre><code>import axios from 'axios';
  import store from '../store/store';
  
  export default function execute() {
      axios.interceptors.request.use(function(config) {
          const token = this.$store.state.token;
          if(token) {
              config.headers.Authorization = `Bearer ${token}`;
          }
          return config;
      }, function(err) {
          return Promise.reject(err);
      });
  }
  </code></pre>
  
  <p>Result of this changes is that every already existing backend calls ( GET ) which don't need token to work stopped working but it is logical because I didn't clarified to which request it should add token so it is trying to add it everywhere and in my interceptor something is still wrong and that is why every already exisitng request stopped working.</p>
  
  <p>When I try to do backend POST call in browser console I still get this error:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property '$store' of undefined</p>
  </blockquote>
  
  <p>Although I import store to my interceptor file. Any ideas? I can provide some more information if any needed.</p>
  
  <p>I additionally add screenshot of this main, store and interceptor tree structure so you can see that I'm importing fron correct path:</p>
  
  <p><a href="https://i.stack.imgur.com/QuTEB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QuTEB.png" alt="path"></a></p>