Vue Router + Vuex: как сделать так, чтобы каждый охранник маршрута ожидал изменения состояния Vuex?

Question

В моем SPA часть инициализации при загрузке страницы выбирает зарегистрированного пользователя из API, а затем запись пользователя сохраняется в состоянии вместе с флагом initialized.

В роутере beforeEach guard Мне нужно проверить, вошел ли пользователь в систему, но для его корректной работы мне нужно подождать, пока флаг initialized не будет установлен на true. Как я могу заставить свою функцию ждать этого? Должен ли я подключиться к магазину и создать наблюдателя или настроить другую переменную как обещание или что-то в этом роде?

Спасибо!

Answer 1

Вы можете реализовать элементарную функцию «паузы» на маршрутизаторе следующим образом (код не проверен):

// 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 (как правило, рекомендуется по возможности поддерживать слабосвязанный код, когда это возможно).).