Хранилище Vuex не определено в vue-router

#javascript #vue.js #vuejs2 #vuex #vue-router

#javascript #vue.js #vuejs2 #vuex #vue-маршрутизатор

Вопрос:

У меня есть маршрутизатор и глобальный beforeEach хук для проверки подлинности.

 import store from "@/store/store";

const router = new Router({
    // routes...
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!store.getters.getAccessToken) { //undefined store
            next("/access/login");
        }
    }
    else {
        next();
    }
});

export default router;

И в моем store/store.js файле у меня есть действие, которое отправляет запрос на проверку пользователя / пароля, а затем пытается перенаправить на / route (защищенный маршрут).

 import router from "@/router";

//state, getters...

actions: {
    login({commit}, authData) {
        // axios instance prototyped into vue $http object
        this._vm.$http.post("/auth/login", authData)
            .then(response => {
                commit("saveToken", response.data.token);
            })
            .catch((error) => {
                commit("loginError", error.response.data);
            });
    }
},
mutations: {
    saveToken(state, token) {
        state.accessToken = token;

        router.push({
            path: "/"
        });
    },
    loginError(state, data) {
        return data.message;
    }
}

Проблема, с которой я сталкиваюсь, заключается в том, что store in router.js есть undefined . Я несколько раз проверил все импорт, маршруты и имена, и все в порядке.

Может ли это быть проблемой с циклической ссылкой из-за того, что я импортирую router в store и store в router ?

Если это проблема, как я могу получить доступ к хранилищу с маршрутизатора или маршрутизатора из хранилища?

Редактировать

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

 router.push({
    path: "/"
});

потому router что не импортируется.

РЕДАКТИРОВАТЬ: ДОБАВЛЕНО РЕШЕНИЕ @tony19

Я применил решение, которое предоставляет @tony19, и оно работает нормально, но когда я получаю доступ к / маршруту, router.app.$store оно не определено.

Фиксированный код:

 router.beforeEach((to, from, next) => {
    console.log(`Routing from ${from.path} to ${to.path}`);

    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!router.app.$store.getters["authentication/getAccessToken"]) {
            next("/access/login");
        }
        else {
            next();
        }
    }
    else {
        next();
    }
});

Изображение с сеансом отладки:

1. Просто глупый вопрос, вы уверены, что правильно экспортируете хранилище? Что произошло, когда вы удалили ссылку на маршрутизатор в своем хранилище?

2. Все работает, как ожидалось, но не может создать router.push({ path: "/" }); , потому что маршрутизатор не импортирован.

Ответ №1:

Это действительно вызвано циклической ссылкой. Вы могли бы избежать импорта хранилища router.js , используя router.app , который предоставляет ссылку на связанный экземпляр Vue, в который был введен маршрутизатор. При этом вы можете попасть в хранилище с помощью router.app.$store :

 router.beforeEach((to, from, next) => {
  /* ... */
  if (!router.app.$store.getters.getAccessToken) {
    next("/access/login");
  }
});