Firebase 身份验证不持久

Posted 2023-02-22

【中文标题】Firebase 身份验证不持久

【英文标题】：Firebase Authentication not persisting

【发布时间】：2018-04-18 11:53:48

【问题描述】：

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

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

这是我的代码。

文件名：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（无法访问登录时；重定向到家）

我哪里出错了？

【问题讨论】：

您是否使用onAuthStateChanged 监听器来正确检测当前用户状态？

@bojeil 如auth.guard.ts 所示，我没有使用onAuthStateChanged 来监听身份验证更改。是这个问题还是别的什么？

是的，这就是问题所在。这是检测初始身份验证状态的正确方法。

@bojeil 请让我将这个问题标记为已完成。

我已添加我的评论作为答案。

【参考方案1】：

您需要使用onAuthStateChanged监听器来检测初始身份验证状态：

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