如何解决无法正确解决的身份验证防护问题

Question

我在我的angular 6项目中有一个auth防护。我试图根据用户角色来解析auth防护。如果用户具有特定角色，则应解析auth-guard。如果已签名，则auth-guard返回true用户在'roleArray'中扮演角色，否则auth-guard应该返回false，但是即使auth Guard返回true，我也无法打开页面或无法定向到由auth-guards保护的页面。我怎样才能解决这个问题？ 这是我的代码：

    roleArray: string[] = ['admin', 'supervisor'];
    constructor(private afs: AngularFirestore, private router: Router, private afAuth: AngularFireAuth) { }

    canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.afAuth.authState.pipe(map(user => {
            if (user) {
                const role = this.afs.collection('Staffs').doc(user.uid).valueChanges().pipe(take(1));
                role.subscribe((rl: any) => {
                    console.log(this.roleArray.includes(rl.role.toLowerCase()))
                    return this.roleArray.includes(rl.role.toLowerCase());
                })

            }

            else {
                this.router.navigate(['login']);
                return false;
            }
        }));
    }
}