angular - 使用异步方法进行验证时，是否可以从 Angular 的 Guard 中重定向？

Question

在我的 Angular(6.xx) 项目中，我在某些路由上实现了一个 Guard，如果它失败，应该重定向到 '/login'。Guard 依赖于异步方法AuthService来验证用户。

// AuthService
checkLogin(): Observable<boolean> {
  return this.http
    .get<boolean>(`${this.apiUrl}/users/autologin`)
    .pipe(
      map(result => result === true),
      catchError(error => of(false))
    );
}

// AuthGuard
canActivate(next: ActivatedRouteSnapshot, 
  state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.checkLogin();
}

我如何实现这一目标？

注意：如果 canActivate 中的代码是同步的，我知道该怎么做。

代码示例：https ://stackblitz.com/edit/angular-async-guard-redirect?file=src%2Fapp%2Fapp.module.ts

Answer 1

您可以在 AuthGuardtap的 Observable中添加一个，如下所示：pipe

return this.authService.checkAuthentication().pipe(
  tap(authenticated => {
    if (!authenticated) {
      // Add your redirect in here
    }
  })
);

这样，您可以Observable在返回 ' 值之前对其做出反应。

Answer 2

您可以像这样更改 authservice。

   // AuthService
checkLogin(): Observable<boolean> {
  return this.http
    .get<boolean>(`${this.apiUrl}/users/autologin`)
    .pipe(
      map(result => { if(result === true)
                        {
                            returrn true;
                        }
                        this.router.navigateByUrl('/login');
                        return false;
                        }),
      catchError(error => of(false))
    );
}