beforeRouterEnter 가드에서 next()를 호출하는 방법

beforeRouterEnter 가드에서 next()를 호출하는 방법

나는 이 문제로 몇 시간째 꼼짝 못하고 있다.Vue3를 사용하고 있다

를 사용하려고 합니다.beforeRouterEnterguard는 현재 로그인되어 있는 사용자 역할을 체크하고 이를 바탕으로 사용자에게 적절한 루트를 지시합니다.

로그인 폼(로그인 페이지에서)을 송신하면,userRoleIdvuex에 저장되어 홈페이지로 이동합니다.홈페이지에는 다음 스크립트가 있습니다.

beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$store.getters.userRoleId == USER) {
        next("/us");
        return;
      }
      if (vm.$store.getters.userRoleId == ADMIN) {
        next("/ad");
        return;
      }
      if (vm.$store.getters.userRoleId == SUPER_ADMIN) {;
        next("/sa");
        return;
      }
        next();
    });
  },

"/"에서 "/"로 이동할 때 "다음" 콜백이 두 번 이상 네비게이션 가드에서 호출되었습니다.각 내비게이션 가드에서 정확히 한 번 호출해야 합니다.이것은 생산에서 실패할 것입니다.'

이 에러는 다음과 같은 경우에 발생합니다.로그인하지 않고 다른 블록으로 이동합니다(즉,next()회선에 도달했습니다).또는 로그인하고 있을 때, 또는 내부에서 로그인하고 있을 때if즉시 진술이 진실이다next()도달하면 리다이렉트가 기능하지 않습니다.

전화하는 것은 실수입니다.next안에서.next콜백이 시점에서 네비게이션은 이미 완료되어 있습니다.이것은, 다음의 리다이렉트입니다.router.push대신, 이런 종류의 논리는 구성 요소에 속합니다.mounted(next콜백은 라우터 가드가 아닌 그 후에 실행됩니다).

리다이렉트는 불필요하기 때문에 여기서 하지 말아 주세요.스토어는 글로벌하며 다음에 액세스하는 대신 직접 가져올 수 있습니다.vm.

다음 중 하나여야 합니다.

import store from '...';
...
beforeRouteEnter(to, from, next) {
  if (store.getters.userRoleId == USER) {
    next("/us");
  } else if ... {
    ...
  } else {
    next();
  }
},

언급URL : https://stackoverflow.com/questions/69634238/how-to-call-next-in-the-beforerouterenter-guard