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

任何以前在Laravel中使用Vue JS的人都应该熟悉。

现在我已经尝试添加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拦截器以处理错误的大多数Google搜索都是使用vuex的示例提出的。我真的不想引入vuex来解决此问题，因为我不想触摸它，直到我确定对于我的特定应用程序是必须的，并且仅能遵循本教程肯定显得有些矫kill过正。 >

如何调用我的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分钟前出现了非常类似的问题。

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

1 个答案: