Firebase-Authentifizierung nicht persistent

Question

Die Authentifizierung scheint nach dem Aktualisieren der Seite nicht bestehen zu bleiben. Auch nach der Verwendung von firebase.auth.Auth.Persistence.LOCAL.

Immer, wenn ich mich bei meiner App anmelde, werde ich erfolgreich zum Dashboard weitergeleitet. Wenn die Seite jedoch aktualisiert wurde, ist der Zugriff auf das Dashboard nicht möglich.

Hier ist mein Code.

Dateiname: login.component.ts

import { Router } from '@angular/router'; 
import { Component, OnInit } from '@angular/core'; 

import * as firebase from 'firebase/app'; 
import { Observable } from 'rxjs/Observable'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import { AngularFirestore } from 'angularfire2/firestore'; 

@Component({ 
    ... 
}) 
export class LoginComponent implements OnInit { 

    email: string = ''; 
    password: string = ''; 

    constructor(public afAuth: AngularFireAuth, private router: Router, private fb: FormBuilder) {} 

    signIn(credentials) { 
     this.email = credentials.email; 
     this.password = credentials.password; 

     this.afAuth.auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(() => { 
      this.afAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(() => { 
       this.router.navigate(['dashboard']); 
      }).catch((err) => { 
       ... 
      }) 
     }).catch((err) => { 
      ... 
     }) 
    } 

    ngOnInit() {} 

} 

Dateiname: auth.guard.ts

import { Injectable } from '@angular/core'; 
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 

import { AngularFireAuth } from 'angularfire2/auth'; 

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private router: Router, private afAuth: AngularFireAuth) {} 

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
     var authed = this.afAuth.auth.currentUser; 

     if (authed) { 
      return true; 
     } else { 
      this.router.navigate(['/']); 
      return false; 
     } 
    } 
} 

Zusätzliche Information:

@angular/animations: 5.0.0 
@angular/common: 5.0.0 
@angular/compiler: 5.0.0 
@angular/core: 5.0.0 
@angular/forms: 5.0.0 
@angular/http: 5.0.0 
@angular/platform-browser: 5.0.0 
@angular/platform-browser-dynamic: 5.0.0 
@angular/router: 5.0.0 
angular2-materialize: 15.1.10 
angularfire2: 5.0.0-rc.3 
core-js: 2.4.1 
firebase: 4.6.1 
hammerjs: 2.0.8 
jquery: 2.2.4 
materialize-css: 0.100.2 
rxjs: 5.5.2 
zone.js: 0.8.14 

Erwartetes Ergebnis:

http://localhost:4200/dashboard (ACCESSIBLE Bei der Anmeldung)

Aktuell Ergebnis:

http://localhost:4200/dashboard (INACCESSIBLE während Sie angemeldet sind; REDIRECTS TO HOME)

Wohin ging ich falsch oder etwas anderes?

Answer 1

Sie müssen onAuthStateChanged Hörer verwenden, um den anfänglichen Auth Zustand zu erfassen:

firebase.auth().onAuthStateChanged(user => { 
    if (user) { 
    // User is signed in. 
    } else { 
    // User is signed out. 
    } 
});