title: Axios interceptor steals catch() path from the calling Promise in Vue.js, breaking down-stream error handling
body: <p>I am trying to intercept 401 errors in axios for protected routes, but my interceptor seems to 'steal' the catch() chain away from <strong>all</strong> HTTP requests that return an error, as well as losing the error payload they contain (which the UI uses to display the type of error). This breaks all the down-stream component methods code are using Vuex actions to login, register, etc.</p>
  <p>A possible related symptom is that I don't seem to be able to pass a 'real' reference to the currentRoute object to check the meta attribute for protected status. Instead I have to use <code>._value.</code> to get at the values of the route's meta property.</p>
  <p><strong>main.js</strong></p>
  <pre><code>createApp(App)
      .use(store)
      .use(router)
      .provide('GStore', GStore)
      .mount('#app')
  </code></pre>
  <p><strong>router.js</strong></p>
  <pre><code>import registerInterceptor from '@/router/interceptor'
  ...
  registerInterceptor(router)
  export default router
  </code></pre>
  <p><strong>interceptor.js</strong></p>
  <pre><code>import axios from 'axios'
  import store from '@/store/index'
  export default (router) =&gt; {
    axios.interceptors.response.use(response =&gt; {
      return response;
    }, (error) =&gt; {
      let requiresAuth=router.currentRoute._value.meta.requiresAuth
      if (error.response.status === 401 &amp;&amp; requiresAuth) {
          console.log('token expired',error.response)
          store.dispatch('logout')
      }
      return error
    });
  }
  </code></pre>
  <p><strong>LoginUser.js</strong></p>
  <pre><code>methods: {
      login() {
        this.$store
          .dispatch('login', {
            username: this.username,
            password: this.password
          })
          .then(() =&gt; {
            //NOTE: this does not return an error if login fails because the axios interceptor.js changes the code path to only run through this `then` fork, but this STINKS
            if (this.$store.getters.loggedIn) {
              this.$router.push({name: 'EventList'})
            } else {
              this.error ='No active account found with the given credentials.'
            }
          })
        .catch(() =&gt; {
          console.log('this is never called UNLESS I remove `registerInterceptor(router)` from the router.js')
        })
      }
    }
  </code></pre>