Магазин Vuex не определен в Vue-роутере - PullRequest
Новая
       20

Магазин Vuex не определен в Vue-роутере

1 голос
/ 19 апреля 2019

У меня есть маршрутизатор и глобальный 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 есть действие, которое делает запрос на проверку пользователя / пароля, изатем пытается перенаправить на / маршрут (защищенный маршрут). 

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 в router.js равно undefined.Я несколько раз проверил все операции импорта, маршруты и имена, и они в порядке.

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

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

РЕДАКТИРОВАТЬ

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

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

, поскольку router не импортируется.

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

Я применил решение, предоставляемое @ 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();
    }
});

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

enter image description here

1 Ответ

2 голосов
/ 19 апреля 2019

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

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