Angular 由于异常，警卫没有重定向到特定页面

Question

所以我正在尝试实现一个基本的守卫：

canActivate(route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<boolean> {
return this.userService.isBoardMember().pipe(
  map(data => {
    if (data === false) {
      this.router.navigate(['main']);
      return false;
    }
    return true;
  })
);
}

isBoardMember 方法如下所示：

getUserDetails(): Observable<User> {
this.requestUrl = `${configs.bgwssApi}v1/bics/${this.bic}/tcifs/${this.tcif}/users`;
return this.http.get<User>(this.requestUrl).pipe(catchError(this.handleError));
}

isBoardMember(): Observable<boolean> {
return this.getUserDetails().pipe(map(data => {
  return (data.userRole === 'BOARD_MEMBER');
}));
}

handleError方法：

  private handleError(e: HttpErrorResponse) {
let errorMessage = '';
if (e.error instanceof ErrorEvent) {
  // Client side error received
  errorMessage = `Error getting user occurred: ${e.error.message}`;
} else {
  // Server side error received
  errorMessage = `Error getting user from server, code: ${e.status}, message: ${e.message}`;
}
console.error(errorMessage);
return throwError(errorMessage);

}

问题是当 getUserDetails http 请求 returns 404 错误（没有找到特定用户）时，isBoardMember 方法没有 return 任何东西所以我的守卫没有正确地重定向到 main 页面，而是它只是加载了一个没有 url 的空页面。需要一些帮助来解决这个问题。

Answer 1

您应该添加另一个 catchError，因为您在 handleError 方法中抛出 404 错误。

感觉 isBoardMember 是合适的地方。如果你觉得它应该在守卫中，你可以在那里添加逻辑：

所以要么在服务中：

isBoardMember(): Observable<boolean> {
  return this.getUserDetails().pipe(
    map(data => data.userRole === 'BOARD_MEMBER'),
    catchError(() => of(false))
  );
}

或守卫中：

constructor(private userService: UserService, private router: Router) {}

canActivate(): Observable<boolean | UrlTree> {
  return this.userService.isBoardMember().pipe(
    catchError(() => of(false)),
    map(data => data || this.router.createUrlTree(['main']))
  );
}

我正在使用 createUrlTree 因为这是从守卫进行重定向的推荐方式

Angular 由于异常，警卫没有重定向到特定页面

Angular guard not redirecting to specific page due to exception

angular

typescript

angular-router-guards