title: localStorage item not updating in axios headers
body: <p>I am using a JWT Token auth system, and when I login I get the token like this:</p>
  
  <pre><code>axios.post('/login', data)
      .then(response =&gt; {
          localStorage.setItem('token', response.data.token);
     });
  </code></pre>
  
  <p>This works well and the token is saved in localStorage. However, the token is not included in the later requests. The <em>Authorization</em> header is <code>Bearer null</code>. </p>
  
  <p>This is how I set up my global axios object.</p>
  
  <pre><code>window.axios = axios.create({
      baseURL: '/api/',
      timeout: 10000,
      headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
          'Authorization': 'Bearer ' + localStorage.getItem('token')
      }
  });
  </code></pre>
  
  <p>If I refresh the site, the <em>token</em> is set, and is used properly.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I got it to work by removing the <code>Authorization</code> header from the <code>create()</code> method and instead using <code>window.axios.defaults.headers.common['Authorization']</code>. But now the same problem appears with <em>Laravel Echo</em>. I create the instance like this:</p>
  
  <pre><code>window.Echo = new Echo({
      broadcaster: 'pusher',
      key: 'xxx',
      cluster: 'eu',
      encrypted: true,
      namespace: 'xxx',
      auth: {
          headers: {
              'Authorization': 'Bearer ' + localStorage.getItem('token')
          }
      }
  });
  </code></pre>
  
  <p>And I update the header like this:</p>
  
  <pre><code>window.setAuthToken = (token) =&gt; {
      window.axios.defaults.headers.Authorization = 'Bearer ' + token;
      window.Echo.options.auth.headers.Authorization = 'Bearer ' + token;
      localStorage.setItem('token', token);
  }
  </code></pre>
  
  <p>The axios header is successfully updated, but not Echo.</p>