Axios 请求拦截器在我的 vue 应用程序中不起作用

Posted 2023-02-22

【中文标题】Axios 请求拦截器在我的 vue 应用程序中不起作用

【英文标题】：Axios request interceptor is not working in my vue app

【发布时间】：2018-08-23 14:42:04

【问题描述】：

我正在尝试让 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);
                );

拦截器未触发！

【问题讨论】：

你为什么将import 与require 混合使用并用于相同的库？

@Phil 对此感到抱歉。将删除要求。但这不是问题。

但是您已经删除了导入：/

@Phil 现已修复 :)

你调用axios.get()的第二个sn-p在哪里？ axios 变量来自哪里？我问是因为在第一个 sn-p 中，axios 和 window.axios 是单独的实例

【参考方案1】：

您在导入的 axios 实例上调用拦截器，但它需要在您创建的实例上。

无论如何，打电话给window.axios = axios.create() 真的很糟糕，你应该不惜一切代价避免它。如果你想让它全局可用，你应该将它绑定到 Vue Prototype。更好的办法是把它移到另一个模块中：

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 实例使用它，如 here in the 4. comment 所示。