Javascript Firebase身份验证未持久化
刷新页面后,身份验证似乎不会持续。即使使用了Javascript Firebase身份验证未持久化,javascript,angular,firebase,firebase-authentication,angular-cli,Javascript,Angular,Firebase,Firebase Authentication,Angular Cli,刷新页面后,身份验证似乎不会持续。即使使用了firebase.auth.auth.Persistence.LOCAL 每当我登录我的应用程序时,它都会成功地将我重定向到仪表板。但是,当页面刷新后,无法访问仪表板 这是我的密码 文件名:login.component.ts import { Router } from '@angular/router'; import { Component, OnInit } from '@angular/core'; import * as firebase
firebase.auth.auth.Persistence.LOCAL
每当我登录我的应用程序时,它都会成功地将我重定向到仪表板。但是,当页面刷新后,无法访问仪表板
这是我的密码
文件名: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() {}
}
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;
}
}
}
文件名:auth.guard.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() {}
}
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
预期结果:
@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
(登录时可访问)
当前结果:
@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
(登录时无法访问;重定向到主页)
我哪里出了问题或其他问题?您需要使用
onAuthStateChanged
侦听器来检测初始身份验证状态:
firebase.auth().onAuthStateChanged(user => {
if (user) {
// User is signed in.
} else {
// User is signed out.
}
});
您是否使用
onAuthStateChanged
侦听器正确检测当前用户状态?@bojeil如auth.guard.ts
所示,我没有使用onAuthStateChanged
侦听身份验证更改。这就是问题还是别的?是的,这就是问题所在。这是检测初始身份验证状态的正确方法。@bojeil请回答我,将此问题标记为已完成。我已添加我的注释作为回答。