Angular - 如何让 canActivate 等待 promise 响应？

Question

如果用户已登录，我会尝试检查 CanActivate gurad。
如果是，那么我会把他导航到某个页面。
如果没有，那么我会把他导航到登录页面。
我使用 promise 。

我有一个名为 LoginService 的服务:

export class LoginService {

  urlcheck = 'http://localhost:80/isconnected.php';
  resultCheck;

  constructor(private http: HttpClient, private router: Router)
  {
  }

  async checkLogin()
  {
    const x = await this.updateConnectedState();
    return x;
  }

  updateConnectedState()
  {
    //formData here...
    return this.http.post(this.urlcheck, formData).toPromise()
      .then(
        (response) =>
        {
          this.resultCheck = response; 
          console.log(response);
          return this.resultCheck.state; //state is true/false
        },
        (error) => 
        { 
            console.log(error); 
            return false;  
        }
      );
    }
  }

canActivate Gurad:

export class BackHomeGuardService implements CanActivate
{
  constructor(private logService: LoginService, private router: Router)
  {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|boolean
  {
    const result = this.logService.checkLogin();
    console.log( result);

    if (result)
    {
      console.log('true');
      // navigate to hom page
      return true;
    }
    else
    {
      console.log('false');
      // navigate to login page
      return false;
    }
  }
}

guard canActivate 函数始终返回 true。
我检查了控制台， promise 的结果是:

__zone_symbol__state: null
__zone_symbol__value: []

我想让 canActive 在它做某事之前等待结果。
如果我的后端(php 代码文件)需要 30 秒才能完成怎么办？
我需要一个解决方案。谢谢。

Answer 1

根据CanActivate的类型:

export declare interface CanActivate {
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree;
}

canActivate 方法可以返回 Observable、Promise 或 boolean。

您可以像这样简单地返回您的 checkLogin() 调用:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|boolean {
    return this.logService.checkLogin();
}

一切都会正常进行。

---

更新

回答问题“我如何处理我的 canActivate 中返回的 bool 值” 来自评论

CanActivate 的思想是在某种情况下限制某些路由的访问。您可以通过链接您的 Promise 或 Observable 来执行一些副作用(但我不确定它们将如何显示，除非它是一个 console.log):

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|boolean {
    return this.logService
      .checkLogin()
      .then(canLogin => {
         console.log('Can user login:', canLogin);
         // perform you side effects here
      })

}