如何将身份验证防护与 NGRX 一起使用

Question

我在Angular应用程序中使用NGRX，我正在尝试使用身份验证保护。 当应用启动时，我会调度一个操作，该操作从服务器 (Firebase( 获取身份验证状态。 问题是，如果我直接转到由身份验证保护的链接，则默认身份验证状态为 false，因此会返回并重定向到登录页面。

这是我的可以激活方法

canActivate() {
return this.store.select(fromAuth.getAuthenticatedStatus).pipe(
//filter(isAuth => isAuth == true || isAuth == false),
take(1),
map((isAuth: boolean) => isAuth),
catchError(() => of(false))
)
}

有没有办法等到身份验证状态从服务器返回，然后再检查存储中的身份验证状态？ 我已经尝试过过滤器并删除 take 运算符，但似乎不起作用。

我不想将对服务器的调用放在身份验证保护中，因为我不希望每次切换页面时它都检查服务器。

Answer 1

你有：

@Injectable()
export class LoggedGuard implements CanActivate {
constructor(private auth: AngularFireAuth, private router: Router) { }
canActivate() {
return this.auth.authState.pipe(
take(1),
map(user => !!user), // !! convert User object to boolean value
tap(isLogged => {
if(!isLogged) {
this.router.navigate(['/login'])
console.log("You are not logged in. You cannot access route.")
}
})
)
}
}

在这种情况下，我更喜欢向 firebase 发出请求，以获得新的身份验证状态，而不是从商店中获取它。如果您为具有某些索赔的人提供保护，这一点更为重要，因为如果您删除某个管理员，他可能仍然有旧的索赔。

Firebase有自己的IndexedDB，如果你在浏览器中将商店连接到一些"本地数据库"，并且你的应用程序错误地将从本地检索数据，并且不会检查更新，你可以有无休止的登录用户，即使你禁止他并删除他的帐户。