Фон
Я создал файл router / index.js и создал маршрутизатор для своего приложения Vue.Я добавил VueX в приложение и использую его во всех компонентах.Я хотел бы использовать геттер внутри маршрутизатора для проверки прав доступа пользователя, вошедшего в систему, но у меня возникают проблемы с правильным импортом VueX.
Проблема
Когда я указываю свой магазин и модуль в файле маршрутизатора index.js
, я пытаюсь использовать this.$store.registerModule()
.Когда я пытаюсь это сделать, я получаю неопределенное в this.$store
.
Пример
import Vue from 'vue';
import Router from 'vue-router';
import { mapGetters } from 'vuex';
import authentication from '../store/modules/authentication';
import store from '../store';
if (!(store && store.state && store.state[name])) {
this.$store.registerModule(name, authentication);
}
Эта логика работает в любом компоненте Vue, в котором я ее использую, но она не работаетв файле роутера.
Моя цель - проверить состояние в VueX следующим образом:
const getters = {
...mapGetters('authentication', ['IS_LOGGED_IN'])
};
const router = new Router({
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: {
requiresAuth: true,
isAdmin: true
}
]
});
router.beforeEach((to, from, next) => {
if (
to.matched.some(record => record.meta.requiresAuth) &&
to.matched.some(record => record.meta.isAdmin)
) {
if (!getters.IS_LOGGED_IN && !getters.IS_ADMIN) {
next({
path: '/login',
params: { nextUrl: to.fullPath }
});
} else {
next();
}
} else if (to.matched.some(record => record.meta.requiresAuth)) {
if (!getters.IS_LOGGED_IN) {
next({
path: '/login',
params: { nextUrl: to.fullPath }
});
} else {
next();
}
} else if (to.matched.some(record => record.meta.guest)) {
next();
} else {
next();
}
});
export default router;
Вопрос
Как правильно использовать VueXс Vue Router?
Вещи, которые я пробовал
Я пытался использовать,
store.registerModule(name, authentication);
Выдает неопределенное значение, registerModule