vue js router + firebase authentication

Question

我使用vue js 2.4.2,vue router 2.7.0和firebase 4.3.0。我无法让路由认证的东西工作。这是我目前route.js

import Vue from 'vue' 
import Router from 'vue-router' 
Vue.use(Router) 

import Firebase from './firebase' 

import Dashboard from './components/Dashboard.vue' 
import Auth from './components/Auth.vue' 


let router = new Router({ 
    mode: 'history', 
    routes: [ 
     { 
      path: '/', 
      component: Dashboard, 
      meta: { 
       auth: true 
      } 
     }, 
     { 
      path: '/login', 
      component: Auth 
     } 
    ] 
}) 

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.auth)) { 
     if (!Firebase.auth().currentUser) { 
      next({ 
       path: '/login' 
      }) 
     } else { 
      next() 
     } 
    } else { 
     next() 
    } 
}) 

export default router 

但现在每次我去/它重定向我回/login，可能是因为Firebase.auth().currentUser是null，即使我其实登陆，我该如何解决这个问题？

Answer 1

尝试使用Firebase.auth().onAuthStateChanged而不是Firebase.auth().currentUser;这是推荐当前用户的方式。

通过currentUser获取用户可能会导致类似于您所看到的问题。这是来自Firebase的官方文档。

注意：currentUser也可能为空，因为auth对象尚未完成初始化。如果您使用观察员来跟踪用户的登录状态，则无需处理此情况。

尝试设置你认证这样的逻辑：

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.auth)) { 
     Firebase.auth().onAuthStateChanged(function(user) { 
      if (!user) { 
       next({ 
        path: '/login' 
       }) 
      } else { 
       next() 
      } 
     } 
    } else { 
     next() 
    } 
})