如何在 NGRX 中使用身份验证保护

Question

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

这是我的 canActivate 方法

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 发出请求以获取新的身份验证状态，而不是将其从商店中取出。如果您为拥有某些声明的人设置保护，这一点更为重要，因为如果您删除某个管理员，他可能仍有旧声明。

如果您将商店连接到浏览器中的某些“LocalDatabase”并且错误地您的应用程序将从本地检索数据并且不会检查更新，Firebase 有他自己的 IndexedDB 即使您禁止他并删除他的帐户，您也可以无限登录用户.