Vue Router + Vuex: 각 경로 가드가 Vuex 상태 변경을 대기하기 전에 만드는 방법은 무엇입니까?

Vue Router + Vuex: 각 경로 가드가 Vuex 상태 변경을 대기하기 전에 만드는 방법은 무엇입니까?

내 SPA에서 페이지 로드 시 초기화의 일부는 API에서 로그인한 사용자를 가져온 다음 사용자 레코드가 다음과 함께 상태로 저장됩니다.initialized깃발

라우터에서beforeEachguard 사용자가 로그인했는지 확인해야 하지만 올바르게 작동하려면 다음 시간까지 기다려야 합니다.initialized플래그가 다음으로 설정됨true어떻게 하면 제 기능이 그것을 기다릴 수 있을까요?가게에 들어가서 감시자를 만들어야 할까요, 아니면 다른 변수를 약속으로 설정해야 할까요?

감사합니다!

라우터에 다음과 같은 기본적인 "일시 중지" 기능을 구현할 수 있습니다(코드는 테스트되지 않음).

// Router is initially not paused
let pausedResolve = null
let pausedPromise = Promise.resolve()

router.beforeEach(async (to, from, next) => {
  await pausedPromise
  next()
})

function pause() {
  if (!pausedResolve) {
    pausedPromise = new Promise(resolve => pausedResolve = resolve)
  }
}

function resume() {
  if (pausedResolve) {
    pausedResolve()
    pausedResolve = null
  }
}

라우터를 만든 후 즉시 호출pause()그 후에 통화에 로그인한 후에.resume()(Vuex 코드에서 이 작업을 수행할 수 있습니다.)

이 구현의 이점은 라우터 코드가 Vuex 코드에 의존하지 않는다는 것입니다(가능할 때마다 코드를 느슨하게 연결하는 것이 일반적으로 좋습니다).

언급URL : https://stackoverflow.com/questions/56821510/vue-router-vuex-how-to-make-beforeeach-route-guard-wait-for-vuex-state-change