[英]Authentication + Ionic + Firestore + Guard (canActivate) - Access Permission
我正在 Ionic 中创建一个应用程序,它使用 Firebase 对用户进行身份验证。 成功执行身份验证后,将其数据保存在 Firestore 中。 用户 Firestore 上的集合中的一项是“activeUser: Boolean”,我可以在登录后通过“AngularFirestore”插件的可观察 (user$) 返回来监控它。
我创建了一个 canActivate 类型的 Guard 文件,以便在 Firestore 更改为“False”并且用户尝试导航到另一个页面时从 Firestore 监视“activeUser”标志,它将被“注销”并通知其用户已已被管理员停用。
我是 Ionic 的新手,我对 Guards 和 Observables 等一些主题有疑问。 如果下面的代码是合理的或者有一些我们可以改进的地方,我希望你能帮助我。
另一个问题与 Observables 有关。 我可以在应用程序需要时订阅 observable USER$ 吗? 我应该注意性能吗? 我在哪里取消订阅 ionic?
如果有人有使用 Guard 和 Firestore 的代码示例或一些教程链接,我将不胜感激。
感谢大家的帮助
身份验证.Service.ts
/**
* Funcao que fica 'ouvindo' o estado da autenticado
* e obtem os dados armazenados no firestore referente
* ao usuario logado.
**/
this.user$ = this.afAuth.authState.pipe(
switchMap(user => {
if (user) {
return this.afStore.doc<IUser>(`users/${user.uid}`).valueChanges();
} else {
return of(null);
}
})
);
user-active.guard.ts
export class UserDisabledGuard implements CanActivate {
constructor(private authService: AuthenticationService, private router: Router) { }
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> {
return this.authService.user$.pipe(
filter(val => val !== null),
take(1),
map(response => {
if (response.activeUser) {
this.authService.logout();
Storage.remove({ key: TOKEN_KEY });
this.authService.isAuthenticated.next(false);
this.router.navigateByUrl('/login');
return false;
} else {
return true;
}
})
);
}
}
我用的是Angular,但我觉得差不多。 你在服务和守卫中所做的方式都很好。 但是我不会在你的后卫 pipe function 中做这么多的操作。 因为其中一些看起来与原始可观察的 object 无关。
Firebase 身份验证为我们提供了 authstate 方法来检查 state。 我所做的是检查用户的 id 是否未定义
this.afAuth.authState.pipe(map((data) => { return data?.uid }) )
afAuth:AngularFireAuth
在guard.ts 中,我返回一个 Observable<boolean | 网址树> object。 这样路由守卫就可以检查和重定向。 这就是我所做的, https://medium.com/p/angular-route-setting-login-and-route-guard-canactivate-fab53eb1715a
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.