axios请求拦截器错误,Axios请求拦截器在我的Vue应用程序中不起作用

I'm trying to make axios working with a request interceptor. However

before a request is made the interceptor is not triggered. What could be going wrong here? I've red already a lot about this problem but not

found a solution so far. Could use some help here! This is my code:

import VueRouter from 'vue-router';

import Login from './components/Login.vue'

import Home from './components/Home.vue'

import axios from 'axios';

window.Vue = require('vue');

window.axios = axios.create({

baseURL: 'http://localhost:8080',

timeout: 10000,

params: {} // do not remove this, its added to add params later in the config

});

Vue.use(VueRouter);

// Check the user's auth status when the app starts

// auth.checkAuth()

const routes = [

{ path: '/', component: Login, name: 'login' },

{ path: '/home', component: Home, name: 'home', beforeEnter: requireAuth },

];

const router = new VueRouter({

routes // short for `routes: routes`

});

const app = new Vue({

router

}).$mount('#app');

function requireAuth (to, from, next) {

if (!loggedIn()) {

router.push('/');

} else {

next()

}

}

function loggedIn() {

return localStorage.token !== undefined;

}

axios.interceptors.request.use(function (config) {

alert('test');

return config;

}, function (error) {

// Do something with request error

return Promise.reject(error)

})

When I use axios within another vue file:

axios.get('users').then((data) => {

console.log(data);

});

The interceptor is not triggered!

解决方案

You're calling the interceptor on the axios instance you imported, but it needs to be on the instances you created.

Calling window.axios = axios.create() is really bad style anyway and you should avoid it at all costs. If you want it to be globally available you should bind it to the Vue Prototype. Even better would be to move it out in another module:

const instance = axios.create({

baseURL: 'http://localhost:8080',

timeout: 10000,

params: {} // do not remove this, its added to add params later in the config

});

instance.interceptors.request.use(function (config) {

alert('test');

return config;

}, function (error) {

// Do something with request error

return Promise.reject(error)

})

export default instance

If you really want it to be available everywhere without having to import it, consider wrapping my code from above inside a Vue plugin and let your Vue instance use it, as shown here in the 4. comment.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值