Инициализировать приложение Vue после изменения состояния аутентификации Firebase

Самый простой способ - дождаться состояния аутентификации перед монтированием приложения:

const app = new Vue({
  router,
  store,
  render: h => h(App),
});

firebase.auth().onAuthStateChanged(user => {
  store.commit('authStateChanged', user);
  app.$mount('#app');
});

Если вы хотите показать счетчик перед монтированием, поместите его в #app:

<div id="app"><div class="loader">Loading...</div></div>

Фактически, это сделает ваши действия более чистыми, а приложение более надежным, если вы извлечете логику состояния аутентификации в authStateChanged фиксацию, как указано выше, и обработаете здесь перенаправление маршрута. Поскольку это будет обрабатываться, если состояние аутентификации изменится, пока вы находитесь на маршруте, в то время как router.beforeEach будет проверять, когда вы собираетесь по нему.

firebase.auth().onAuthStateChanged(user => {
  store.commit('auth/authStateChanged', user);

  const isAuthed = Boolean(user);
  const { meta } = router.history.current;

  if (isAuthed && meta.isPublicOnly) { // e.g. /login + /signup
    router.push('/dashboard');
  } else if (!isAuthed && meta.isPrivate) {
    router.push('/login');
  }

  app.$mount('#app');
});

Обратите внимание, что перед этим выполняется первый router.beforeEach обратный вызов, поэтому его следует игнорировать, пока не будет определено состояние аутентификации. Поскольку мы обрабатываем первое перенаправление в onAuthStateChanged, это не имеет значения.

state: {
  isInited: false,
  isAuthed: false,
},
mutations: {
  authStateChanged(state, user) {
    state.isAuthed = Boolean(user);
    state.isInited = true;
  }
}

router.beforeEach((to, from, next) => {
  const { isInited, isAuthed } = store.state.user;

  if (isInited) {
    if (!isAuthed && to.matched.some(record => record.meta.isPrivate)) {
      return next('/login');
    } else if (isAuthed && to.matched.some(record => record.meta.isPublicOnly)) {
      return next('/dashboard');
    }
  }

  next();
});

Вы, вероятно, можете вообще предотвратить загрузку маршрута до тех пор, пока isInited не станет истинным.

ПРИМЕР

./App.vue

created: function() {
  auth.onAuthStateChanged(user => {

    this.$store.dispatch("SET_USER", user)

    user.getIdToken().then( token => {
      this.$store.dispatch("SET_TOKEN", token)
    })
}

./store.js (мутации)

export default {
  SET_USER(state, user) {
    state.authenticated = !!user
    state.user = {
      email: user ? user.email : null,
      displayName: user ? user.displayName : null,
      photoURL: user ? user.photoURL : null,
    }
  }
  SET_TOKEN(state, payload) {
    state.token = payload
  }
}

ОБЗОР

Жизненный цикл

Этот пример работает с использованием ловушки жизненного цикла created: Vue. Внутри created: мы используем auth.onAuthStateChanged для запуска прослушивателя событий. Ваше приложение теперь ожидает изменений авторизации от firebase.

auth.onAuthStateChanged(user => { ...listening for user objects... })

Объект user возвращается всякий раз, когда Firebase замечает изменение состояния аутентификации. Используйте его свойства и методы для аутентификации и авторизации.

Свойство: user.emailVerfied

Метод: user.getIdToken()

TL;DR

При использовании Firebase onAuthStateChanged необходимо реализовать объекты Observable и Subscriptions. Наблюдаемый RxJS является асинхронным, как promise, и поможет вам дождаться ответа аутентификации от Firebase.

См. первый аргумент nextOrObserver из документация:

onAuthStateChanged(nextOrObserver, error, completed) returns function()

Наблюдаемый шаблон проектирования (т.е. асинхронный, принудительный, многоадресный) задокументирован здесь.