"state.user is null" при использовании Vue 'x getter в моих маршрутах - PullRequest
Новая
       22

"state.user is null" при использовании Vue 'x getter в моих маршрутах

0 голосов
/ 06 апреля 2020

Я привык к VueJS, но с Vuex я почти ничего не знаю.

По сути, я хочу настроить систему маршрутизатора на основе ролей: JSON, который возвращает мой API, является объектом который содержит массив с ролями пользователя, зачеркнутый так, что я могу разобрать его из Vue.

Я следовал некоторым учебникам, и после некоторых настроек, вот как выглядит мой магазин (соответствующая часть): 

getters: {
    isLogged: state => !!state.user,

    roles: state => JSON.parse(state.user.user.roles) // returns ['authenticated_user', 'admin']
}

Если я протестирую метод получения «ролей» с mapGetter внутри компонента, у меня не возникнет проблем с получением данных. Тем не менее, я продолжаю отображать state.user is null как ошибку в моей консоли.

Вот как я пытался его настроить: 

const routes = [
    ...
    {
        path: '/admin',
        name: 'admin',
        component: () => import('../admin/Dashboard'),
        meta: {
            auth: true,
            role: 'admin'
       }
    },
    ...

];

router.beforeEach((to, from, next) => {
    const loggedIn = localStorage.getItem('user');
    const role = store.getters.roles;
    console.log(store.getters.roles); // state.user is null

    if (to.matched.some(record => record.meta.auth) && !loggedIn) {
        next('/login');
        return;
    }

    if (loggedIn && to.match.some(record => !roles.includes(record.meta.role)) {
        next(from.fullPath);
        return;
    }

    next();
});

Я нашел этот вопрос это ближе всего к моей ситуации, но это не помогло мне, поскольку Vue, кажется, признает state.user в моем случае.

Чего мне не хватает?

Заранее спасибо

1 Ответ

1 голос
/ 06 апреля 2020

Измените роль получателя роли на это: roles: state => state.user && JSON.parse(state.user.user.roles)

Сначала проверьте, существует ли state.user, а затем попробуйте получить значение.

...