반응형
내비게이션 가드를 통해 "/로그인"에서 "/"로 이동할 때 리디렉션됨"이 나타나는 이유는?
여기서 라우터 가드는 내 vue 앱에서 잘 작동하고 있지만 로그인 후 콘솔에 다음과 같은 오류가 나타난다.
검색되지 않은(약속 중) 오류: 내비게이션 가드를 통해 "/로그인"에서 "/"로 이동할 때 리디렉션됨.
여기 내 코드 조각이 있다.
const routes = [
{
path: "/login",
component: () => import("../views/Auth/Login"),
meta: { hideForAuth: true },
},
{
path: "/",
component: DashboardLayout,
meta: { requiresAuth: true },
children: [
{
path: "home",
name: "Home",
component: () => import("../views/Home"),
},
],
},
];
Auth 가드:
const loggedIn = localStorage.getItem("auth");
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!loggedIn) {
next({ path: "/login" });
} else {
next();
}
} else {
next();
}
if (to.matched.some((record) => record.meta.hideForAuth)) {
if (loggedIn) {
next({ path: "//" });
} else {
next();
}
} else {
next();
}
});
문제가 뭔지 알 수가 없다.미리 고마워!
이후next
경비원 밖으로 나가지 않으면 경비원이 전화할 것이다.next
의 2개의 도기 이상if
진술과 두 진술 모두 실행될 것이다.
- 변경하기
//
로 가는 길./
- 부르다
next
맘에 들다return next
기능을 종료하거나 구조를 지정하려면if
단 한 사람만이 달릴 수 있도록 하는 진술 - 세트
loggedIn
라우터가 생성될 때 가드 내부에서 또는 한 번만 평가될 것이다.
여기 이 일을 하는 한 가지 방법이 있는데, 이 방법은 또한 노선이 없는 것을 포함한다.meta
:
router.beforeEach((to, from, next) => {
const loggedIn = localStorage.getItem("auth");
const isAuth = to.matched.some((record) => record.meta.requiresAuth);
const isHide = to.matched.some((record) => record.meta.hideForAuth);
if (isAuth && !loggedIn) {
return next({ path: "/login" });
} else if (isHide && loggedIn) {
return next({ path: "/" });
}
next();
});
반응형
'IT이야기' 카테고리의 다른 글
babelify에서 babelify할 배관 중 transform-object-rest-spread를 사용할 수 없음 (0) | 2022.04.10 |
---|---|
Vuex: 왜 우리는 돌연변이, 행동, 게이터를 대문자로 씁니까? (0) | 2022.04.10 |
Vue는 반응성 물체로 만들어진 구성 요소를 받았다. (0) | 2022.04.10 |
바인딩 및 언바인드가 Vue의 사용자 지정 명령을 호출한 경우 및 라이프사이클 기능과 어떻게 관련되는지(장착/파괴) (0) | 2022.04.10 |
Vue.js 2, css에서 사용자 지정 구성 요소 태그 이름 사용? (0) | 2022.04.10 |