在 App.vue 脚本中访问主 Vue 实例

Question

In Vue2, I'm trying to set up an axios interceptor in my App.vue file to trap any responses that come back 401 from my API so I can redirect the user to the Vue route /sign-in . My code works, but I rely on storing the Vue instance created in main.js in window.appvue .

In main.js :

window.appvue = new Vue({
    router,
    render: (h) => h(App),
}).$mount("#app");

In App.vue :

<script>
import...
export default { ... }
 
export const $axios = axios.create();
$axios.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        if (error.response.status === 401) {
            window.appvue.$router.push("/sign-in");
        } else {
            return Promise.reject(error);
        }
    }
);
<script>

I have tried importing $axios from App.vue in main.js and moving the $axios.interceptors.response.use(...) code to that file, but then the interceptor never runs when I have a page where an $axios.get() returns 401.

Is there a way to accomplish this without storing the main Vue instance in window as a global? Or should I just go with what's working and call it a day?

---

PS I was not aware of the existence of $root , when I asked this question, and I have not tried a version where the code in App.vue uses $root instead of relying on the window.appvue global, but when it comes to accessing the main/root instance of Vue from main.js , $root is definitely preferable to a global.

Answer 1

inside your main.js try something like this

import router from './router'
import axios from 'axios'

Vue.prototype.axios.interceptors.reponse.use(
  res => {
    // res stuff here
  },
  err => {
    // error stuff here
    if (err.response.status === 401) {
      router.push("/sign-in");
    } else {
      return Promise.reject(err);
    }
  }
)

Answer 2

I managed to avoid using the global by isolating the axios wrapper into its own module/file. Then my .vue files that need axios can import from that instead of from axios directly

In {root}/src/axios.js :

import axios from "axios";
import router from "@/router";

const $axios = axios.create();
$axios.interceptors.response.use(
    [stuff that uses router]
);
export default $axios;

Then in my files that need to call to the API:

import $axios from "@/axios.js";

and use $axios instead of axios to make the API call.