как исправить проблему с защитой, которая не решается правильно

Question

У меня есть auth guard в моем проекте angular 6. Я пытался разрешить auth guard в соответствии с ролью пользователя. Если у пользователя есть определенная роль, auth-guard должен быть разрешен. Auth-guard возвращает true, если подписанныйу пользователя есть роль в 'roleArray', в противном случае auth-guard должен возвращать false, но даже если auth guard возвращает true, я не могу открыть страницы или не могу перейти к страницам, которые охраняются auth-guard.Как я могу это исправить?Вот мой код:

    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;
            }
        }));
    }
}