Angular AuthGuard可以在promise不起作用的情况下激活

Question

我试图保护Angular中的管理面板，这样只有管理员用户才能访问它。在创建管理员AuthGuard时，我遇到了一个问题，当逻辑比"更复杂时，AuthGuard似乎无法工作；用户是否已登录&"；。

我得到的不是预期的重定向，而是一个空的白色屏幕。

在过去的几个小时里，我一直在碰壁，试图找到根本原因，但它似乎卡在了这条线上：const user = await this.firebaseAuth.user.toPromise();，但我不明白为什么。

有人能引导我朝着正确的方向前进吗？因为我似乎迷失在了角度和可观测的丛林中？

AuthGuard可以激活方法：

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> {
return this.accountDataService.userIsAdmin().pipe(
take(1),
map((admin) => {
console.log(admin);
if (admin) {
return true;
}
this.router.navigate(['/aanmelden']);
return false;
})
);
}

这是数据服务：

userIsAdmin(): Observable<boolean> {
return from(
new Promise<boolean>(async (resolve) => {
const user = await this.firebaseAuth.user.toPromise();
if (user === undefined) {
resolve(false);
}
const result = await user.getIdTokenResult();
const admin = result.claims.admin;
if (admin === undefined || admin === null || admin === false) {
resolve(false);
}
resolve(true);
})
);
}

Answer 1

我想this.firebaseAuth.user没有完成。toPromise仅在可观测完成时解析。

您应该重写userIsAdmin函数，使其仅使用可观察性。

userIsAdmin(): Observable<boolean> {
return this.firebaseAuth.user.pipe(
switchMap(user => {
if (user === undefined || user === null) {
return of(false);
}
return from(user.getIdTokenResult()).pipe(
map(result => {
const admin = result.claims.admin;
if (admin === undefined || admin === null || admin === false) {
return false;
}
return true;
})
)
})
);
}

Answer 2

需要完成可观察项。最后，我在.take(1)上取得了更大的成功。这就解释了Observable.of(true)起作用的原因。试试这个：

canActivate(): Observable<boolean> {
return this.auth.map(authState => {
if (!authState) this.router.navigate(['/aanmelden']);
console.log('activate?', !!authState);
return !!authState;
}).take(1)
}