Vue Js Router + Firebase Authentifizierung

Question

Ich verwende vue js 2.4.2, vue router 2.7.0 und firebase 4.3.0. Ich kann die Routenauthentifizierung nicht zum Laufen bringen. Dies ist meine aktuelle 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 

Aber jetzt jedes Mal gehe ich zu / es leitet mich auf /login zurück, wahrscheinlich, weil die Firebase.auth().currentUsernull ist, auch wenn ich in der Tat angemeldet bin. Wie kann ich dieses Problem beheben?

Answer 1

versuchen Sie mit Firebase.auth().onAuthStateChanged anstelle von Firebase.auth().currentUser; Dies ist die empfohlene Methode, um den aktuellen Benutzer zu erhalten.

Das Abrufen des Benutzers durch currentUser kann ein Problem verursachen, das dem ähnelt, was Sie sehen. Dies ist vom offiziellen Dokument der Firebase.

Hinweis: currentUser kann auch null sein, da das Auth-Objekt die Initialisierung noch nicht beendet hat. Wenn Sie einen Beobachter verwenden, um den Anmeldestatus des Benutzers zu verfolgen, müssen Sie diesen Fall nicht behandeln.

Versuchen Sie, stellen Sie diese Logik wie Authentifizierung:

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