Как синхронизировать vuex state в router (vue, vuex-router-sync)?

Question

[ascold2013]

Здравствуйте! Помогите разобраться - пытаюсь получить из state значение, но получаю undefined (значение просто не успело загрузиться с сервера). Как мне заставить beforeEach дождаться значение из state? Пробовал vuex-router-sync но либо я что то не понял, либо мой способ не работает.
Нужно сначала получить user.role а потом уже выполнить проверки.
Мой код:

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
import { sync } from 'vuex-router-sync';
import { store } from '../store';
Vue.use(VueRouter);

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

router.beforeEach((to, from, next) => {
    const userRole = store.state.usersStore.user.role;
    console.log(userRole);
    if (userRole && (
        (userRole === 'Admin' && to.path === '/edms/admin') ||
        (userRole === 'superAdmin' && to.path === '/edms/superAdmin') // ||
        // ((userRole !== 'superAdmin' || userRole !== 'Admin') && (to.path !== '/edms/admin' || to.path !== '/edms/superAdmin'))
    )) {
        console.log(to.path);
        next();
    }
});

sync(store, router);

export default router;

Answer 1

[Riley Usagi]

Я сам только начинаю работать с Vue, но возможно мой совет вам поможет.

Попробуйте после авторизации на сервере - хранить все данные пользователя (включая его роль) у клиента в local storage

Сложность здесь заключается лишь в том, что необходимо будет проверять актуальность данных при каждом запросе на сервер. Или же сократить количество лишних запросов при помощи технологии JWT