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() 
    } 
})