在Angular应用中,可以使用rxjs的from
函数来将Firebase的初始化方法转换为可观察对象。然后,可以将该可观察对象与take(1)
操作符结合使用,以确保在Firebase初始化完成之前只发出一个值。最后,可以使用switchMap
操作符将这个可观察对象与守卫的逻辑进行连接。
以下是一个示例代码:
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { from } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';
@Injectable()
export class FirebaseAuthGuard implements CanActivate {
constructor(
private router: Router,
private afAuth: AngularFireAuth
) {}
canActivate(): Observable {
return from(this.afAuth.authState).pipe(
take(1),
switchMap(authState => {
if (authState) {
// 用户已经登录,可以访问路由
return of(true);
} else {
// 用户未登录,重定向到登录页面
this.router.navigate(['/login']);
return of(false);
}
})
);
}
}
在上面的代码中,afAuth.authState
是一个可观察对象,它会在Firebase初始化完成后发出认证状态。然后,使用take(1)
操作符确保只接收到一个值。接下来,使用switchMap
操作符将认证状态与守卫的逻辑进行连接。如果用户已经登录,守卫返回true
,允许访问路由。如果用户未登录,守卫会重定向到登录页面,并返回false
,禁止访问路由。
请注意,上述代码假设您已经正确配置了AngularFire和Firebase身份验证。