title: keep token updated on axios action
body: <p>I want to consume an Express REST API that requires a valid json web token for some routes. Due to the fact I have to pass the token from the localstorage everytime I wanted to create an "Axios config file".</p>
  
  <p>My file <strong>http.js</strong> contains the following code</p>
  
  <pre><code>import Vue from "vue";
  import axios from "axios";
  
  const devInstance = createInstance("http://localhost:3000");
  
  devInstance.interceptors.request.use(config =&gt; {
      console.log(config);
      return config;
  }, err =&gt; {
      console.log(err);
      return Promise.reject(err);
  });
  
  devInstance.interceptors.response.use(res =&gt; {
      console.log(res);
      return res;
  }, err =&gt; {
      console.log(err);
      return Promise.reject(err);
  });
  
  const productionInstance = createInstance("http://www.myApi.com");
  
  function createInstance(baseURL){
      return axios.create({
          baseURL,
          headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${localStorage.token}`
          }
      });
  }
  
  Vue.prototype.$http = devInstance; // Check debug/build mode
  </code></pre>
  
  <p>within my <strong>main.js</strong> I import this instance once</p>
  
  <pre><code>import http from "./http.js";
  </code></pre>
  
  <p>and from now on I can use <code>this.$http</code> to get the global axios instance without importing it.</p>
  
  <p>When consuming the API <code>localStorage.token</code> returns undefined because it is not set when creating the instance.</p>
  
  <p>How can I keep this <code>Authorization</code> attribute updated without passing in the token manually each time?</p>