Laravel VueJS axios interceptor для доступа к приложению vue - PullRequest
Новая
       6

Laravel VueJS axios interceptor для доступа к приложению vue

0 голосов
/ 06 сентября 2018

У меня есть стандартные леса Vue JS, поставляемые с Laravel. 

// 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 для обработки ошибок, я сделал это под заголовком X-Requested-With в bootstrap.js 

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.js, чтобы изменить const app на export const app, но это не имело никакого значения.

Я почти уверен, что мне просто не хватает базовых знаний об импорте и экспорте в es6, но, к сожалению, я не могу найти в Google ничего, что могло бы это объяснить.

Большая часть моего Googling о том, как настроить этот перехватчик axios для обработки ошибок, пришла с примерами, использующими vuex. Я действительно не хочу вводить vuex только для того, чтобы решить эту проблему, так как я не хочу касаться этого, пока я не уверен, что это необходимо для моего конкретного приложения, и оно определенно кажется излишним, просто чтобы следовать учебному руководству.

Как я могу вызвать мой метод app.refreshToken () или получить доступ к моему экземпляру vue в перехватчике axios?

1 Ответ

0 голосов
/ 06 сентября 2018

После 

require('./bootstrap');

window.Vue = require('vue');

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

Добавьте то, что говорится в ошибке:

"экспорт" по умолчанию "(импортированный как" приложение ") не найден в" ./app.js'

Просто добавьте это: 

export default app;

Это может решить проблему компиляции, так как для вызова функции, я еще не тестировал ее ... пришла с очень похожей проблемой 15 минут назад ..

...