Use Vue Router In Script

Question

I have a script that will redirect a user to the login screen when they get a response code of 401 - which means their session has expired within the API.

import         


        

Answer 1

This problem is is applicable to other frameworks like React and Angular and should be solved similarly there.

Router instance is unavailable outside component hierarchy, it cannot be accessed when Axios interceptor is defined in module scope.

It's also unwise to modify global Axios instance because it can be used by third-party libraries and cause unexpected side effects for them, this also makes clean-up more complicated in tests.

Local Axios instance can be defined in Vue application, also allows to define specific options like base URL:

Object.defineProperty(Vue.prototype, 'axios', {
  get() {
    return this.$root._axiosInstance;
  }
});

Vue.mixin({
  created() {
    if (this.$root === this) {
      let axiosInstance = axios.create({/*...*/});
      axiosInstance.interceptors.response.use(
        response => response,
        error => {
          ...
          this.$router.push(...);
          ...
        }
      );

      this._axiosInstance = axiosInstance;
    }
  }
});

And is accessed as this.axios inside components.

Answer 2

You can try this:

this.$router.push({ name: 'nome-of-location'})

Answer 3

Make sure you already installed vue router. If not yet, this is how to install

npm install vue-router // npm

or vue router cdn

 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

When used with a module system, you must explicitly install the router via Vue.use(). Do this one

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

then redirect to other page like this

this.$router.push({ name: 'nome-of-location'})