Как заставить Vue Router Guards ждать Vuex? - PullRequest
Новая
       11

Как заставить Vue Router Guards ждать Vuex?

0 голосов
/ 19 декабря 2018

Так что все ответы, которые я нашел публично на этот вопрос, были не очень полезны, и хотя они «работали», они были невероятно хакерскими.

В основном у меня есть переменная vuex, appLoading, которая изначальноtrue, но устанавливается в false после завершения всех асинхронных операций.У меня также есть другая переменная vuex с именем user, которая содержит информацию о пользователе, которая отправляется из асинхронной операции после ее возвращения.

У меня также есть защита маршрутизатора, которая проверяет; 

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.requiresAuth)) {
    if (store.getters.getUser) {
      return next();
    }
    return router.push({ name: 'index.signup' });
  }

  return next();
});

В моем первоначальном экземпляре Vue я затем отображал состояние загрузки до appLoading = false;

Теперь это «работает», но есть проблема, которая действительно меня беспокоит.Если вы загрузите страницу, вы получите «мерцание» противоположной страницы, которую вы должны видеть.

Так что, если вы вошли в систему, при первой загрузке вы увидите мерцание страницы регистрации.Если вы не вошли в систему, вы увидите мерцание страницы входа в систему.

Это довольно раздражает, и я сузил проблему до своей проверки подлинности.Кажется, он перенаправляет страницу регистрации на маршрутизатор, поскольку user не существует, а затем мгновенно выдвигает на страницу входа в систему, поскольку user фиксируется.

Как я могу обойти это таким образом, что это не так?Хакать, потому что это немного раздражает и разочаровывает, что у Vue нет ни малейшего количества официальных документов / примеров для такой распространенной проблемы, тем более что такое большое количество веб-приложений используют аутентификацию.

Надеюсь, кто-то может оказать некоторую помощь.:)

1 Ответ

0 голосов
/ 19 декабря 2018

Согласно обсуждению в комментариях:

Наилучшим подходом для вашего случая будет, если вы сделаете вашу appLoading переменную promise.Вот как вы можете что-то делать или ждать, пока данные вашего приложения не будут разрешены.

Учитывая appLoading обещание, которое вы инициализируете своим обещанием вызова API, ваш маршрутизатор будет иметь вид: 

router.beforeEach((to, from, next) => {
  appLoading.then(() => {
    if (to.matched.some(route => route.meta.requiresAuth)) {
      if (store.getters.getUser) {
        return next();
      }
      return router.push({ name: "index.signup" });
    }

    return next();
  });
});

Возможно, вы захотите сохранить его как экспорт из вашего кода init вместо того, чтобы хранить его в Vuex.Vuex предназначен для реактивных данных, которые совместно используются компонентами.

...