node.js - 以 Angular 返回可观察值时如何处理错误？

Question

我正在为我的应用程序创建一个 AuthGuard ..现在，当我尝试在没有登录的情况下加载组件时，它应该将我重定向到登录页面..但是我收到如下错误

什么也没发生。

我从后端抛出此错误{“status”:401，“message”:“未找到身份验证 token !”}}因为没有身份验证 token

以下是我的AuthGuard的代码

export class AuthGuardService implements CanActivate {

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

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

    return this.authService.checkLogin().pipe(
      map((data: HttpResponse) => {
        if (data.status == 200) {
          console.log("OUTPUT:", data)
          return true
        }
        else return false
      }),
    )

  }
}

以下是我在AuthService中的函数:

 public checkLogin():Observable<HttpResponse> {

    return this.http.get<HttpResponse>('http://localhost:5000/auth/check-login', { withCredentials: true })

  }

现在我如何处理此类错误并将回退值设置为false，这样如果发生任何错误，则无法访问该路由

Answer 1

如果我理解正确，您希望实现以下行为:

• 如果 checkLogin() 收到指示“成功”的响应，则 auth-guard 应返回 true
• 如果 checkLogin() 收到错误响应，则将用户重定向到后备页面并返回 false

如果您使用下面的代码，请注意 catchError() 仅在后端响应异常时触发，而 map() 始终在后端响应异常时触发成功响应来自后端。因此，在肯定的情况下，您可以简单地返回 true 而不检查响应的内容。但是，如果您从后端收到异常，您可以使用 this.router.navigate() 将用户重定向到回退页面，然​​后返回 of(false)阻止请求通过身份验证防护。

export class AuthGuardService implements CanActivate {

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

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

    return this.authService.checkLogin().pipe(
      map(() => true),
      catchError(() => {
        this.router.navigate(['route-to-fallback-page']);
        return of(false);
      })
    );
  }
}

---

Angular 7.1+ 的替代解决方案

从 Angular 7.1 开始，您可以只返回一个包含后备路由的 UrlTree-Object:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {

    return this.authService.checkLogin().pipe(
      map(() => true),
      catchError(() => this.router.parseUrl('/route-to-fallback-page'))
    );
  }