web-dev-qa-db-ja.com

Axiosリクエストインターセプターが機能しない

リクエストインターセプターでaxiosを機能させようとしています。ただし、リクエストが行われる前にインターセプターはトリガーされません。ここで何がうまくいかないのでしょうか？この問題についてはすでに多くのことを知っていますが、これまでのところ解決策は見つかりません。ここでいくつかの助けを使うことができます！これは私のコードです：

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

別のvueファイル内でaxiosを使用する場合：

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

インターセプターはトリガーされません！

vue.jsaxiosinterceptor
6
Jenssen

インポートしたaxiosインスタンスでインターセプターを呼び出していますが、作成したインスタンスでインターセプターを呼び出す必要があります。

とにかくwindow.axios = axios.create()を呼び出すのはスタイルが悪いので、絶対に避けてください。グローバルに利用可能にしたい場合は、Vueプロトタイプにバインドする必要があります。別のモジュールに移動することをお勧めします。

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

インポートせずにどこでも利用できるようにしたい場合は、コードを上記のVueプラグイン内にラップして、Vueインスタンスで使用できるようにします、示されているように ここの4.コメント 。

14
Philip Feldmann