Как совместить жизненные циклы vue.js и vue-router?

Question

[JohnDaniels]

добрый вечер.

имеется такой код

import { router } from './router'

//

export default new Vue({
    store,
    el: '#app',
    router,
    components: {
        App
    },
    template: '<App/>',
    beforeCreate(){
         //тут мне нужно проверить авторизацию до того, как сработает роутер
    }
});

router:

const requireAuth = (to, _from, next) => {
    // эта функция все равно срабатывает первой, перед beforeCreate()
    if (!store.getters.auth) {
        next({
            path: '/login',
        })
    } else {
        next()
    }
};

export const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: Main,
            beforeEnter: requireAuth
        },
        {
            path: '/login',
            component: Login,
            beforeEnter (to, from, next){
                if(store.getters.auth){
                    console.log('auth!')
                    next({ path: '/' })
                } else {
                    next()
                }
            }
        },
    ]
});

что мне нужно: при инициализации приложения выполнить действие ДО того, как сработает роутер. я думал что beforeCreate() для этого подойдет, но роутинг срабатывает первым.

Answer 1

[Тимофей]

Можно использовать такой или такой подходы.

Можно попробовать вообще инициализировать роутер после проверки авторизации и, скажем, добавлять туда только форму авторизации по любому пути.

Вообще, сам вариант "запустить компонент до того, как сработает роутер" неверен с точки зрения архитектуры. Роутер всего лишь подсовывает компонент по определённому пути, то есть до того, как роутер засунет компонент, в DOM нельзя выполнять код этого компонента. То есть посыл вашего вопроса неверен в корне, нужно решать проблему другим путём.