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

Question

在 Vue2 中，我试图在我的 App.vue 文件中设置一个 axios 拦截器，以捕获从我的 API 返回 401 的任何响应，以便我可以将用户重定向到 Vue 路由 /sign-in .我的代码可以工作，但是我依赖于将在 main.js 创建的 Vue 实例存储在 window.appvue 中。

在main.js:

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

在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>

我尝试从main.js 中的App.vue 导入$axios 并将$axios.interceptors.response.use(...) 代码移动到该文件，但是当我有一个$axios.get() 返回401 的页面时，拦截器永远不会运行。

有没有办法在不将主 Vue 实例作为全局存储在 window 中的情况下完成此操作？还是我应该只做有效的事情并收工？

---

附言 当我问这个问题时，我不知道$root 的存在，并且我还没有尝试过App.vue 中的代码使用$root 而不是依赖window.appvue 全局的版本，但是当它出现时要从 main.js 访问 Vue 的主/根实例，$root 绝对比全局更可取。

Answer 1

我设法通过将axios 包装器隔离到它自己的模块/文件中来避免使用全局。然后我的.vue 需要axios 的文件可以从中导入，而不是直接从axios 导入

在{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;

然后在我需要调用API的文件中：

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

并使用$axios 而不是axios 进行API 调用。

Answer 2

在您的 main.js 中尝试这样的操作

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);
    }
  }
)