web-dev-qa-db-fra.com

L'intercepteur de requête Axios ne fonctionne pas

J'essaie de faire fonctionner axios avec un intercepteur de requête. Cependant, avant qu'une demande ne soit faite, l'intercepteur n'est pas déclenché. Qu'est-ce qui pourrait mal se passer ici? J'ai déjà beaucoup parlé de ce problème, mais je n'ai pas trouvé de solution jusqu'à présent. Pourrait utiliser de l'aide ici! Voici mon 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)
})

Lorsque j'utilise axios dans un autre fichier vue:

axios.get('users').then((data) => {
                console.log(data);
            });

L'intercepteur n'est pas déclenché!

vue.jsaxiosinterceptor
6
Jenssen

Vous appelez l'intercepteur sur l'instance axios que vous avez importée, mais elle doit l'être sur les instances que vous avez créées.

Appeler window.axios = axios.create() est de toute façon un très mauvais style et vous devriez l'éviter à tout prix. Si vous voulez qu'il soit disponible globalement, vous devez le lier au prototype Vue. Encore mieux serait de le déplacer dans un autre 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

Si vous voulez vraiment qu'il soit disponible partout sans avoir à l'importer, pensez à envelopper mon code d'en haut dans un plugin Vue et laissez votre Vue l'utiliser , comme indiqué ici dans le 4. commentaire .

14
Philip Feldmann