角度异步保护canActivate（）函数[重复]答案

【问题标题】：Angular async guard canActivate() function [duplicate]角度异步保护canActivate（）函数[重复]
【发布时间】：2020-12-30 18:23:44
【问题描述】：

我遇到了一些麻烦，因为在实施警卫时，我有以下（伪代码）：

canActivate(
  route, state, etc....{
    checkStatus()

    if(status){
      result = false
      etc
    }
)

问题是 checkStatus() 是异步的，但我需要结果来决定是返回 true 还是 false 给守卫。我一直在寻找类似的问题，答案通常是使用 Promises，但我仍然不知道如何在这个 canActivate() 函数中使用它们。有什么帮助吗？

谢谢。

更新：

我发现由于 checkStatus() 函数是异步的并被视为一个承诺，我可以只使用 checkStatus().then(status 和 if 以及所有内容)。

无论哪种方式都非常感谢。

【问题讨论】：

标签： javascript angular asynchronous promise guard

【解决方案1】：

如果您查看 canActivate (https://angular.io/api/router/CanActivate) 的 API，您会发现该函数除了常规布尔值外，还可能返回 Promise<boolean> 或 Observable<boolean>。

例如，使用承诺：

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Promise<boolean> {
  return new Promise( async (resolve, reject) => {
    // do something
    resolve(true);
} );

或者使用 observable：

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<boolean> {
  // do something
  return someObservable$.pipe(
    map( () => true)
  );
}

【讨论】：

问题是在“//做某事”中我需要调用 checkStatus() 和之后的使用状态，因为 checkStatus() 还没有完成，所以它不会被更新。
checkStatus() 是否返回一个承诺？然后你可以做类似const status = await checkStatus()
好像是这样，它返回一个 Promise 所以我可以使用 checkStatus().then()

【解决方案2】：

您可以在 canActivate() 函数中使用 rxjs 运算符。例如，'from' 运算符可用于从 Promise 中获取 observable。

canActivate() {
  return from(checkStatus); // checkStatus should return promise<boolean> in this case
}

【讨论】：

从 'rxjs' 导入 { from };在 canActivate 函数中... return from('异步函数返回 promise');