Firebase身份验证不会持久存在

问题描述

刷新页面后，身份验证似乎不会保留。即使在使用 firebase.auth.Auth.Persistence.LOCAL 。

Authentication doesn't seem to persist after page has been refreshed. Even after using firebase.auth.Auth.Persistence.LOCAL.

每当我登录我的应用程序时，它成功将我重定向到仪表板。但是，当页面刷新时，无法访问仪表板。

Whenever I log into my app, it successfully redirects me to the Dashboard. But, when page has been refreshed, accessing Dashboard is not possible.

这是我的代码。

文件名：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() {}

}

文件名： 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;
        }
    }
}

其他信息：

@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

预期结果：

http：// localhost：4200 / dashboard （可访问登录时）

当前结果：

http：// localhost：4200 / dashboard （ INACCESSIBLE 登录时;重定向到家）

http://localhost:4200/dashboard (INACCESSIBLE WHILE LOGGED IN; REDIRECTS TO HOME)

在哪里我出错了还是其他什么？

Where did I go wrong or something else?

推荐答案

你需要使用 onAuthStateChanged 侦听器检测初始身份验证状态：

You need to use onAuthStateChanged listener to detect the initial auth state:

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

这篇关于Firebase身份验证不会持久存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！