带有可观察令牌的 Angular CanActivate 不等待

Question

我知道有几个线程，我确实尝试了每个解决方案，但我不确定我的情况有什么不同。

我想创建一个 Guard 以在服务器验证令牌后访问视图以更改密码。

   canActivate(
     route: ActivatedRouteSnapshot,
     router: RouterStateSnapshot
   ):
     | Observable<boolean | UrlTree>
     | Promise<boolean | UrlTree>
     | boolean
     | UrlTree {
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     if (urlParams.has("token")) {
       let token = urlParams.get("token");
       this.authService.getResetPasswordPermission(token).subscribe(
         (res) => {
           return true;
         },
         (err) => {
           return false;
         }
       );
     } else {
       return this.router.createUrlTree(["/authenticate"]);
     }
   }

我知道 subscribe 不会等待结果，所以只会执行 return this.router.createUrlTree(["/authenticate"]);。我尝试使用map 和pipe，但它永远不会进入方法的结果，所以res 或err 都不是。

不知何故，我总是会被重定向到 localhost:4200 而不是 localhost:4200/changePassword 我想去的地方，甚至是 localhost:4200/authenticate 我应该登陆的地方。

与服务器对话的 Observable 方法如下所示：

   getResetPasswordPermission(token): Observable<any> {
     let data = { token: token };
     return this.http.get<any>(RESET_PASSWORD_PERMISSION_API, { params: data });
   }

如果成功，答案是ResponseEntity.ok(token)。

如果不是ResponseEntity.badRequest()。我知道它们的语法都不正确，但你明白我的意思。

如果我要登陆 changePassword 页面，则需要再次使用令牌将其与更改请求一起发送。

Answer 1

我知道您已经尝试过，但我认为地图运算符适合您的情况。 试试这样的：

canActivate(
     route: ActivatedRouteSnapshot,
     router: RouterStateSnapshot
   ):
     | Observable<boolean | UrlTree>
     | Promise<boolean | UrlTree>
     | boolean
     | UrlTree {
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     if (urlParams.has("token")) {
       let token = urlParams.get("token");
       return this.authService.getResetPasswordPermission(token).pipe(
          catchError(err => return of(null)),
          map(resp => !!resp)
       );
     } else {
       return this.router.createUrlTree(["/authenticate"]);
     }
   }