我在这里阅读了指南:https://angular.io/docs/ts/latest/guide/router.html
看起来很简单,但是,我不确定如何在auth guard(canActivate
)中使用angularfire2的身份验证。我试过的是:
AuthService
import { Injectable } from '@angular/core';
import { AngularFire } from 'angularfire2';
@Injectable()
export class AuthService {
private user: any;
constructor(private af: AngularFire) {
this.af.auth.subscribe(user => {
this.user = user;
})
}
get authenticated(): boolean {
return this.user ? true : false;
}
}
AuthGuard
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router, private authService: AuthService) { }
canActivate(): Observable<boolean> | boolean {
if (this.authService.authenticated)
return true;
this.router.navigate(['/login']);
return false;
}
}
我还将 AuthService 添加到引导程序提供程序。
这种工作正常,但是,我的主要问题是当我刷新(或最初加载)具有AuthGuard
的页面时,它总是将我重定向到登录页面,因为AuthGuard
没有'等待身份验证响应。有没有办法等待身份验证完成(即使它失败了),然后检查用户是否经过身份验证?
答案 0 :(得分:14)
问题在于您的代码。在AuthGuard中,您检查authenticated()方法的结果,该方法很可能返回false,因为仍未设置用户属性。试试这个:
<强> AuthService 强>:
import { Injectable } from '@angular/core';
import { AngularFire } from 'angularfire2';';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthService {
private user: any;
constructor(private af: AngularFire) { }
setUser(user) { this.user = user; }
getAuthenticated(): Observable<any> { return this.af.auth; }
}
<强> AuthGuard 强>:
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router, private authService: AuthService) { }
canActivate(): Observable<boolean> | boolean {
// here check if this is first time call. If not return
// simple boolean based on user object from authService
// otherwise:
return this.authService.getAuthenticated.map(user => {
this.authService.setUser(user);
return user ? true : false;
})
}
}
答案 1 :(得分:7)
在某些版本的路由器中可能会有所不同,但我需要返回完成的观察结果。
import { CanActivate, Router } from '@angular/router'
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private af: AngularFire, private router: Router) { }
canActivate(): Observable<boolean> {
return this.af.auth.map(user => {
if (user != null)
return true
this.router.navigate(['/login'])
})
.take(1) // To make the observable complete after the first emission
}
}
答案 2 :(得分:0)
AngularFire、RXJS 和 Firebase 的 2021 年更新
**AuthService**:
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/';
import { Observable } from 'rxjs';
@Injectable()
export class AuthService {
private user: firebase.default.User;
constructor(private afAuth: AngularFire) { }
setUser(user) {
this.user = user;
}
getAuthenticated(): Observable<firebase.default.User> {
return this.afAuth.user;
}
}
**AuthGuard**:
import { map } from 'rxjs/operators';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private authService: AuthService
) {}
canActivate(): Observable<boolean> {
// here check if this is first time call. If not return
// simple boolean based on user object from authService
// otherwise:
return this.authService.getAuthenticated().pipe(
map(user => {
this.authService.setUser(user);
return user ? true : false;
})
)
}
}