programing

Vuex 스토어가 Vue-roouter에서 정의되지 않음

prostudy 2022. 5. 22. 11:23
반응형

Vuex 스토어가 Vue-roouter에서 정의되지 않음

나는 라우터와 글로벌을 가지고 있다.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;
    }
}

내가 가지고 있는 문제는 그 사람이storerouter.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();
    }
});

디버깅 세션이 있는 이미지:

여기에 이미지 설명을 입력하십시오.

이것은 실로 순환 참조에 의해 야기된 것이다.다음 위치에 스토어를 가져오는 것을 피할 수 있다.router.js라우터가 주입된 관련 Vue 인스턴스를 제공하는 를 사용하여.그것으로 너는 가게까지 갈 수 있었다.router.app.$store:

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

참조URL: https://stackoverflow.com/questions/55754891/vuex-store-is-undefined-in-vue-router

반응형