返回布尔值而不是订阅 canActivate答案

【问题标题】：return boolean instead of subscribe to canActivate返回布尔值而不是订阅 canActivate
【发布时间】：2022-02-24 01:40:35
【问题描述】：

我有一个受 canActivate 保护的组件。 checkLogin 函数中的 Authguard 订阅了一个 observable，但我不知道如何从它返回一个布尔值给 canActivate。

guard.service.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }

    public checkService:boolean;
  checkLogin(url: string):boolean {

         return this.loadAppSettings().subscribe(res=>{
              console.log(this.checkservice);
              if (this.checkservice == true) 
              {
                   return true; 
            }
            else{
                this.router.navigate(['/error-user']);
                return false;
            }
            });
      }//checkLogin throws error as type subscription is not assignable to type boolean

所以我想要的是，如果this.checkService 为真，它应该只返回真，用户应该能够降落在受保护的路线上，但如果它是假的，他应该导航到error-user。

Angular2 - return boolean with subscribe to canActivate 这个问题与我的类似，但无法解决我的问题。

有人可以帮忙吗？

【问题讨论】：

@Igor 如果异步调用返回一个可观察对象而不是一个承诺，那么重复项是否仍然相关？
@DavidL - 我会这么认为。一个 observable 只不过是一个带有更多调用的 promise。也可以使用 .toPromise() 将 observable 转换为 Promise。此外，OP 已经表明他们可以订阅 observable，现在只需了解如何使用回调的整个概念即可。
@Igor 我的意思是它可能是相关的，但它不是完全重复的。有一些微妙之处使它成为一个糟糕的重复选择。 OP 的链接问题实际上是一个更好的副本。
是的 @DavidL 完全正确，如果标记为重复，它将被回答。
@AakashThakur 我也不会给你免费的大厅通行证 :)。您有责任进行自己的研究以了解回调和异步代码的方式，并且您已经链接了一个基本上可以解决您的问题的答案。

标签： angular rxjs angular2-routing

【解决方案1】：

canActivate 也可以返回一个 observable，参见定义 CanActivate-interface。只需相应地更改您的返回类型即可。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    let url: string = state.url;

    return this.checkLogin(url);
}

public checkService:boolean;
checkLogin(url: string):Observable<boolean> {
     return this.loadAppSettings().map(res=>{
          console.log(this.checkservice);
          if (this.checkservice == true) 
          {
               return true; 
        }
        else{
            this.router.navigate(['/error-user']);
            return false;
        }
    });
  }

【讨论】：

上面写着Type subscription is not assignable to type Observable<boolean>
@AakashThakur - 抱歉，应该是 map 而不是 subscribe，更新了代码。
非常感谢伊戈尔。

【解决方案2】：

我们也可以像...一样返回 Promise

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> {
    return new Promise<boolean>(resolve => {
       this.service
       .function()
       .toPromise()
       .then((res) => {
         if(condition) {
            resolve(true);
         } else {
            this.router.navigate(["login"]);
            resolve(false); 
         } 
      })
      .catch(() => {
        this.router.navigate(["login"]);
        resolve(false);
       });
    });
  }

【讨论】：