Vue.js / Mixins - есть ли способ получить глобальный объект-миксин вне компонента vue?

Я новичок в Vue.js

Я использую Vue.js 2.4.4. Я создал глобальный миксин в своем файле app.js:

...
import router from './router'
...(some imports and plugins definitions)

Vue.use(VeeValidate);
Vue.component(VuePassword);
...

Vue.mixin({
    data: function(){
        return {
            get auth(){
                return Auth;
            }
        }
    }
    });

const app = new Vue({
    el: '#root',
    template: `<app></app>`,
    components: { App },
    router
});

Этот миксин импортирует некоторый объект Auth с методами проверки e.t.c, которые должны быть в каждом компоненте. Все мои компоненты могут проверить этот миксин, и он работает нормально.

Но мне нужно проверять состояние аутентификации после каждого запроса маршрута, и я хочу использовать свой существующий миксин, поэтому я пытаюсь сделать что-то вроде этого в моем файле router.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
...

Vue.use(VueRouter);

const router = new VueRouter({
    routes:[
      ...
    ]
});
router.beforeEach((to, from, next) => {
    if(to.meta.requiresAuth) {
        if(...call to mixin method) {
            next();
        } else {
            next('/');
        }
    } else {
        next();
    }
});

export default router

Вопрос: Есть ли способ получить глобальный объект миксина и изменить его внутренние значения, или вы можете дать небольшой совет или пример того, что является правильным решением для такого рода задач? Или мне лучше использовать плагины вместо миксинов?


vue.js vue-router vuejs2 vue-mixin
person Alexey Shabramov    schedule 15.11.2017    source источник
comment
Идеальная ситуация для Vuex. Это конечный автомат для Vue. Вы храните всю информацию об авторизации в состоянии, а затем читаете ее с помощью маршрутизатора и миксина.   -  person webnoob    schedule 15.11.2017
comment
Идеально! :) попробую посоветовать.   -  person Alexey Shabramov    schedule 15.11.2017

Ответы (1)


arrow_upward
2
arrow_downward

Я бы предпочел создать отдельный файл для аутентификации, а не делать его миксином. Затем используйте Vue.use (), который установит аутентификацию для объекта vue. Пример того, как могут выглядеть файлы:

auth.js

export default function(Vue) {
    Vue.auth = {
        // do your auth logic
    }
}

Затем в вашем основном файле js main.js

import Auth from './auth.js'
Vue.use(Auth);

Тогда вы сможете использовать Vue.auth. Другой вариант - продолжать использовать миксин и передавать значение в хранилище (например, vuex) или создать свое собственное, если ваш проект небольшой ...

person zeidanbm    schedule 15.11.2017
comment
Спасибо :) Да. Это то что мне нужно, п.с. Я еще не работал с vuex, извините за возможный глупый вопрос. Теперь я понял, что делать :) - person Alexey Shabramov; 15.11.2017
comment
Аналогичный подход заключается в создании плагина Vue. vuejs.org/v2/guide/plugins.html - person RonC; 15.11.2017