반응형
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;
}
}
내가 가지고 있는 문제는 그 사람이store
에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();
}
});
디버깅 세션이 있는 이미지:
이것은 실로 순환 참조에 의해 야기된 것이다.다음 위치에 스토어를 가져오는 것을 피할 수 있다.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
반응형
'programing' 카테고리의 다른 글
"어떤 용도로도 사용할 수 있도록 예약"의 의미는 무엇인가? (0) | 2022.05.22 |
---|---|
농담으로 Vue 필터 테스트 (0) | 2022.05.22 |
Java JAR 파일에서 리소스에 대한 경로를 가져오는 방법 (0) | 2022.05.22 |
JPA : 기본 쿼리 결과 집합을 POJO 클래스 집합으로 변환하는 방법 (0) | 2022.05.22 |
일반 자바에서 HTML 기호를 이스케이프하는 방법은? (0) | 2022.05.22 |