axios拦截器中的Vue-Router
Posted
技术标签:
【中文标题】axios拦截器中的Vue-Router【英文标题】:Vue-Router in axios interceptor 【发布时间】:2019-03-27 15:28:18 【问题描述】:我用 vue-cli 3 创建了一个项目,所以我运行:
>vue create my-app;
>cd my-app
>vue add axios
vue 在我的 my-app\src\plugins\ 中使用以下代码创建文件 axios.js:
"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;
但我需要作为响应拦截器访问 vue-router,我已经尝试添加 import Router from 'vue-router';并使用 Roter.push() 但在执行时说 push 不是一种方法。我也不能使用 This 或 Vue.$router..
我该如何解决这个问题? tks
【问题讨论】:
【参考方案1】:为了在 axios 拦截器或组件文件之外的任何地方使用路由器,我们必须导入应用程序的路由器实例,该实例是在路由器条目文件中创建的(默认为 router.js
)。
应从同一路径导入实例,就像在应用程序的入口文件中所做的那样(默认为main.js
):
import router from './router'
这样可以访问所有方法,如documentation中所述
【讨论】:
我的做法略有不同——我在一个由路由器配置调用的函数中设置了 axios 配置,并将其自身传入。以上是关于axios拦截器中的Vue-Router的主要内容,如果未能解决你的问题,请参考以下文章
拦截器中的 axios react-keycloak/web 令牌