Axios拦截器中的Vue-Router [英] Vue-Router in axios interceptor

问题描述

我用vue-cli 3创建一个项目，所以我运行:

 > vue创建my-app;> cd my-app> vue添加axios 

vue使用以下代码在my-app \ src \ plugins \中创建文件axios.js:

 使用严格"；从'vue'导入Vue；从"axios"导入axios；//完整配置:https://github.com/axios/axios#request-config//axios.defaults.baseURL = process.env.baseURL ||process.env.apiUrl ||'';//axios.defaults.headers.common ['Authorization'] = AUTH_TOKEN;//axios.defaults.headers.post ['Content-Type'] ='application/x-www-form-urlencoded';让config = {//baseURL:process.env.baseURL ||process.env.apiUrl ||"//超时:60 * 1000，//超时//withCredentials:true，//检查跨站点访问控制};const _axios = axios.create(config);_axios.interceptors.request.use(功能(配置){//在发送请求之前先做点事返回配置;}，函数(错误){//发生请求错误返回Promise.reject(error);});//添加响应拦截器_axios.interceptors.response.use(功能(响应){//对响应数据进行处理返回响应；}，函数(错误){//做一些响应错误返回Promise.reject(error);});Plugin.install = function(Vue，options){Vue.axios = _axios;window.axios = _axios;Object.defineProperties(Vue.prototype，{轴距:{得到() {返回_axios;}}，$ axios:{得到() {返回_axios;}}，});};Vue.use(插件)导出默认插件； 

但是我需要在响应拦截器中访问vue-router，我已经尝试从'vue-router'添加导入路由器；并使用Roter.push()，但是在执行时说push不是方法.我也不能使用This或Vue.$ router.

我该如何解决?tks

解决方案

为了在axios拦截器内部或组件文件外部的几乎任何位置使用路由器，我们必须导入应用程序的路由器实例，该实例是在路由器入口文件中创建的(默认为 router.js ).

实例应从相同的路径导入，就像在应用程序的入口文件(默认为 main.js )中导入的那样:

 从"./router"导入路由器 

以这种方式可以访问所有方法，如文档

I create one project with the vue-cli 3, so I run:

>vue create my-app;
>cd my-app
>vue add axios

the vue create in my my-app\src\plugins\ the file axios.js with this code:

"use strict";

import Vue from 'vue';
import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

Plugin.install = function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)

export default Plugin;

but I need to in response interceptor access the vue-router, I already try to add the import Router from 'vue-router'; and use Roter.push() but when execute the say that push are not a method. I can't use This or Vue.$router too..

how can I fix this? tks

解决方案

In order to use router inside axios interceptor or pretty much anywhere outside component's files, we have to import router instance of our application, that is created inside router entry file (by default router.js).

Instance should be imported from the same path, as it is done in application's entry file (by default main.js):

import router from './router'

This way all methods can be accessed, as described in documentation

这篇关于Axios拦截器中的Vue-Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！