Laravel VueJS axios拦截器访问vue应用程序

Question

我有基本上是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”中未找到“导出'默认'（导入为'app'）

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

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

我的大部分关于如何设置这个axios拦截器来处理错误的谷歌搜索都提出了使用vuex的例子。我真的不想引入vuex只是为了解决这个问题，因为我不想触摸它，直到我确定它对我的特定应用程序是必要的，并且看起来有点过分只是为了能够遵循教程。

如何调用app.refreshToken（）方法或访问axios拦截器中的vue实例？

Answer 1

后

require('./bootstrap');

window.Vue = require('vue');

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

添加错误说缺少的内容：

“./app.js”中未找到“导出'默认'（导入为'app'）

只需添加：

export default app;

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