title: Vue.js: How To Make A Request On Behalf Of A Component From The Interceptor?
body: <p>In my Vue app, I have a response interceptor:</p>
  
  <pre><code>axios.interceptors.response.use(function (config) {
          return config;
      }, error =&gt; {
          if (error.response.status !== 401) {
              return new Promise((resolve, reject) =&gt; {
                  reject(error);
              });
          }
  
          if (error.response.status === 401 &amp;&amp; error.response.data.message === 'Token Expired') {
              this.store.dispatch('auth/refreshToken').then(aToken =&gt; {
                  var config = error.config;
                  axios.defaults.headers.common['Authorization'] = 'Bearer ' + aToken;
  
                  return new Promise((resolve, reject) =&gt; {
                      axios.request(config).then(response =&gt; {
                          console.log(response);
                          resolve(response);
                      }).catch((error) =&gt; {
                          reject(error);
                      });
                  });
              });
          }
      });
  </code></pre>
  
  <p>...where I am refreshing the token and making the last (intercepted) request again with the new token.</p>
  
  <p>But the problem is, say I have a component, <code>Product.vue</code>, where I am making a request to the <code>/products</code> endpoint when the component mounts. I am storing all the products in a <code>products</code> data variable of that component. Imagine the user is in the <code>/dashboard</code> route now. He went for a sip of coffee and by the time he comes back the token is already expired. He visits the <code>/products</code> route, the response is 401, so the interceptor intercepts that response, updates the token, and then attempts to make the last failed request with the new token.</p>
  
  <p>But this new request was not performed from the <code>Product</code> component. It was performed from the interceptor, where I don't have access to the <code>Product</code> component. Hence, although the request was successful, my response data are lost and the end-user will see nothing in the view because the <code>products</code> variable is empty.</p>
  
  <p>Is there a way to track which component performed the request and remount it in the interceptor? I tried <code>$router.push('/products')</code> but vue throws an exception stating that navigation to current route not allowed.</p>
  
  <p>Or, is there some way to handle the promise that is being returned from the interceptor in the Product component?</p>