Laravel VueJS axios拦截器访问vue应用答案

【问题标题】：Laravel VueJS axios interceptor accessing the vue applicationLaravel VueJS axios拦截器访问vue应用
【发布时间】：2019-02-11 20:32:25
【问题描述】：

我已经有了 Laravel 附带的基本上默认的 Vue JS 脚手架。

// app.js
require('./bootstrap');

window.Vue = require('vue');

const app = new Vue({
    el: '#app',
    methods: {
        refreshToken: function() {
            console.log('refreshing the token');
        }
    }
});

// bootstrap.js
window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

这对于以前使用过 Vue JS 和 Laravel 的人来说应该很熟悉。

现在我尝试添加一个 axios 拦截器来处理错误，我在 bootstrap.js 中的 X-Requested-With 标头下方完成了此操作

window.axios.interceptors.response.use(
    response => response,
    error => {
        // Show the user a 500 error
        if (status >= 500) {
            console.log({500:error});
        }

        // Handle Session Timeouts
        if (status === 401) {
            console.log({401:error});
            app.refreshToken();
        }

        // Handle Forbidden
        if (status === 403) {
            console.log({403:error});
        }

        return Promise.reject(error)
    }
);

console.log() 实例可以正常工作以验证它是否正常工作。

但是app.refreshToken() 不起作用（也没有给出错误？）。

我并不感到惊讶，因为我没有导入它或任何东西。

但我已经在 bootstrap.js 的顶部尝试过这个：import app from './app.js';

npm run watch 现在会抛出警告：

“在'./app.js'中找不到导出'default'（导入为'app'）

我修改了 app.js 以将 const app 更改为 export const app 但这没有任何区别。

我很确定我只是缺少对 es6 中导入和导出的一些基本了解，但不幸的是，我在 Google 上找不到任何可以解释它的内容。

我在谷歌上搜索如何设置这个 axios 拦截器来处理错误的大部分内容都提供了使用 vuex 的示例。我真的不想引入 vuex 只是为了解决这个问题，因为我不想碰它，直到我确定它对我的特定应用程序是必要的，而且仅仅能够遵循教程似乎有点矫枉过正。

如何在 axios 拦截器中调用我的 app.refreshToken() 方法或访问我的 vue 实例？

【问题讨论】：

您是否尝试将其添加到 app.js 而不是 boostrap？ ...我认为，否则您会进行某种 require 导入循环...由于应用程序调用引导程序，然后您进行引导程序调用应用程序 ..
export/import 仅在您将其拆分为模块（单独的文件）时使用。似乎您拥有boostrap.js 中的所有内容，因此这里完全没有任何问题，因此您不应该使用它。我要做的第一件事就是简单地注销 app const 以查看它是否确实包含您的 Vue 实例并排除任何范围问题。
一切都不在bootstrap.js 中，而是在app.js 中，它在一开始就调用bootstrap.js。而且@Erubiel 肯定没有臃肿的 app.js 文件似乎更好吗？如果我的拦截器增长 app.js 可能会变得非常非常大。

标签： laravel authentication vue.js axios interceptor

【解决方案1】：

之后

require('./bootstrap');

window.Vue = require('vue');

const app = new Vue({
    el: '#app',
    methods: {
        refreshToken: function() {
            console.log('refreshing the token');
        }
    }
});

添加错误提示的内容：

“在'./app.js'中找不到导出'default'（导入为'app'）

只需添加以下内容：

export default app;

这可能会解决编译问题，至于对函数的调用，我还没有测试过... 15分钟前出现了一个非常相似的问题..

【讨论】：