Question

我有AuthGuard我想在其中使用登录material2对话框。因此，在canActivate返回之前，会显示登录对话框，如果登录成功，则对话框返回true，然后canActivate也会返回true。如果登录失败，则对话框不会返回任何内容并再次尝试。

我已经在component中实施了对话框并且工作正常，我正在寻找有关如何将其与canActivate警卫集成的帮助。

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private authService: AuthService, 
            private dialog: MatDialog,
            private router: Router) {}

    successfulLogin: boolean;

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

       // Open the Dialog
       let dialogRef = this.dialog.open(LoginDialog, {
            width: '450px',
            data: { success: this.successfulLogin }
        });

        // NEED HELP HERE, UNSURE HOW TO RETURN
        return dialogRef.afterClosed().subscribe(result =>{
            return result;
        })
    }
}

result中的subscribe正在返回true，但我不确定如何正确地从canActivate返回的逻辑。上面的代码给出了以下错误陈述。

键入＆＃39;订阅＆＃39;不能赋值为＆＃39; boolean | 可观察的|诺＆＃39 ;.输入＆＃39;订阅＆＃39;不是可分配给类型＆＃39;承诺＆＃39;。物业＆＃39;然后＆＃39;类型＆＃39;订阅＆＃39;
中缺少

Answer 1

使用toPromise方法

return dialogRef.afterClosed().toPromise().then(result =>{
    return result ? true : false;
});

Answer 2

实际上，如果您不想在这里使用Promise，则没有理由。

您面临的问题是您实际上是在返回Subscription（即在.subscribe(...)上调用Observable的结果）而不是Observable本身！

只需使用：

return dialogRef.afterClosed();

或者更好的是，如果result实际上不是boolean：

return dialogRef.afterClosed().pipe(result => !!result);

Angular CanActivate with Login对话框

2 个答案: