Vue.js Firebase 身份验证和 Vue 路由

我正在try 验证Vue.使用firebase的js应用程序.

我有一个问题，如果试图在登录时直接访问受登录保护的URL，路由将在firebase之前加载并判断身份验证状态.js有时间返回auth响应.这会导致用户跳转到登录页面(而他们已经登录).

如何延迟vue路由导航，直到从firebase检索到身份验证状态？我可以看到firebase将身份验证数据存储在localStorage中，作为初步身份验证判断，是否可以安全地判断它是否存在？理想情况下，最终结果是在用户经过身份验证时显示加载微调器或其他内容，然后他们应该能够访问导航到的页面.

路由/索引.js

let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/example',
      name: 'Example',
      component: Example,
      beforeEnter: loginRequired
    }
})

function loginRequired (to, from, next) {
  if (authService.authenticated()) {
    next()
  } else {
    next('/login')
  }
}

啊.js

import * as firebase from 'firebase'

var config = {
    // firebase config
}

firebase.initializeApp(config)

var authService = {

  firebase: firebase,
  user: null,

  authenticated () {
    if (this.user == null) {
      return false
    } else {
      return !this.user.isAnonymous
    }
  },

  setUser (user) {
    this.user = user
  },

  login (email, password) {
    return this.firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => {
        this.setUser(user)
      })
  },

  logout () {
    this.firebase.auth().signOut().then(() => {
      console.log('logout done')
    })
  }
}

firebase.auth().onAuthStateChanged(user => {
  authService.setUser(user)
})

export default authService

应用程序.vue

<template>
  <div id="app">
    <p v-if="auth.user !== null">Logged in with {{ auth.user.email }}</p>
    <p v-else>not logged in</p>
    <router-view v-if="auth.user !== null"></router-view>
  </div>
</template>

<script>
import authService from './auth'

export default {
  name: 'app',
  data () {
    return {
      auth: authService
    }
  }
}
</script>