Как можно запретить отображение vue компонента в зависимости от состояния в vuex?

Question

[Евгений Хрипунов]

Есть SPA приложение с доступом через api. Имеется, например, состояние в vuex: isUserLogged = true/false (залогинился ли пользователь на сайте), или же необходимые входные параметры для компонента.
Как лучше сделать проверку на отображение vue компонента для пользователя? Такая реализация кажется немного нерациональной.

<template v-if="isUserLogged">
...
</template>

Может можно сделать проверку в жизненных циклах компонента? Например в beforeCreate() или в create()?
Backend реализуется на laravel и проблема возникает если неавторизированный пользователь в строке браузера введет адрес, который должен быть доступен только для авторизированного пользователя или же иметь какие-либо входные параметры.
В файле web.php

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

В файле api прописано middleware которое запрещает "гостю" осуществлять какие-либо действия, но хотелось бы как-либо ограничить ему доступ/отображение к самим страницам. Или же чтобы авторизированный пользователь не мог вручную вбить адрес страницы которая требует какие-либо входные параметры из предыдущей страницы и увидеть страницу.

Update:
Evgeny Kulakov, спасибо, проблема оказалась в том, что router.beforeEach(...) зависит от расположения в файле app.js
Было вот так и видимо по логике сначала создавался экземпляр vue, а потом уже вызывалось правило router.beforeEach():

const router = new VueRouter({
    mode: 'history',
    routes,    
});

const app = new Vue({
    el: '#app',
    store,
    components: {MainApp},
    router,
});
router.beforeEach((to, from, next) => {    
    if (to.matched.some(route => route.meta.requiresAuth) && (!store.state.isLoggedIn)) {       
        next({name: 'login'});
        return
    }    
    if (to.path === '/login' && store.state.isLoggedIn) {
        next({name: 'dashboard'});
        return
    }
    next()
});

Изменил порядок и заработало:

const router = new VueRouter({
    mode: 'history',
    routes,    
});
router.beforeEach((to, from, next) => {   
    if (to.matched.some(route => route.meta.requiresAuth) && (!store.state.isLoggedIn)) {        
        next({name: 'login'});
        return
    }    
    if (to.path === '/login' && store.state.isLoggedIn) {
        next({name: 'dashboard'});
        return
    }
    next()
});
const app = new Vue({
    el: '#app',
    store,
    components: {MainApp},
    router,
});

Comments

[Aleksandr]

Почему вам кажется нерациональной

<template v-if="isUserLogged">
...

?
В vue-router можно добавить мидлвар "beforeEnter" и в нем поместить логику, редиректить.

[Евгений Хрипунов]

Aleksandr, в vue-router уже реализована глобальная проверка:

router.beforeEach((to, from, next) => {
    //Проверяем нужна ли авторизация для данного маршрута и состояние vuex
    if (to.matched.some(route => route.meta.requiresAuth) && (!store.state.isLoggedIn)) {
        // редирект на страницу входа
        next({name: 'login'});
        return
    }
    //
    if (to.path === '/login' && store.state.isLoggedIn) {
        next({name: 'home'});
        return
    }
    next()
});

Но дело в том, что если пользователь вручную вбивает url в строке браузера, то редирект не срабатывает и страница с компонентом отображается. Хотелось бы это как-то попытаться запретить.

[Evgeny Kulakov]

Евгений Хрипунов, вообще странно, не важно как он вбивается, этот хук глобальный и должен срабатывать при любом изменении.

[Евгений Хрипунов]

Evgeny Kulakov, спасибо, проблема оказалась в том, что router.beforeEach(...) зависит от расположения в файле app.js
Было вот так и видимо по логике сначала создавался экземпляр vue, а потом уже вызывалось правила router.beforeEach():

const router = new VueRouter({
    mode: 'history',
    routes,    
});

const app = new Vue({
    el: '#app',
    store,
    components: {MainApp},
    router,
});
router.beforeEach((to, from, next) => {    
    if (to.matched.some(route => route.meta.requiresAuth) && (!store.state.isLoggedIn)) {       
        next({name: 'login'});
        return
    }    
    if (to.path === '/login' && store.state.isLoggedIn) {
        next({name: 'dashboard'});
        return
    }
    next()
});

Изменил вот порядок и заработало:

const router = new VueRouter({
    mode: 'history',
    routes,    
});
router.beforeEach((to, from, next) => {   
    if (to.matched.some(route => route.meta.requiresAuth) && (!store.state.isLoggedIn)) {        
        next({name: 'login'});
        return
    }    
    if (to.path === '/login' && store.state.isLoggedIn) {
        next({name: 'dashboard'});
        return
    }
    next()
});
const app = new Vue({
    el: '#app',
    store,
    components: {MainApp},
    router,
});