由于异常，Angular 防护未重定向到特定页面答案

【问题标题】：Angular guard not redirecting to specific page due to exception由于异常，Angular 防护未重定向到特定页面
【发布时间】：2020-04-17 20:55:43
【问题描述】：

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

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 请求返回 404 错误（没有找到特定用户）时，isBoardMember 方法没有返回任何内容，所以我的守卫没有正确重定向到 main 页面，因为它应该- 相反，它只是加载一个没有 url 的空页面。需要一些帮助来解决这个问题。

【问题讨论】：

你能展示this.handleError方法吗？
添加到我的问题
将handleError的返回值改为false并检查。

标签： angular typescript angular-router-guards

【解决方案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，因为这是推荐的从守卫进行重定向的方法

【讨论】：