角度异步守卫 canActivate() 函数

编程问答 2022-06-01

问题描述

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

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

    if(status){
      result = false
      etc
    }
)

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

谢谢。

更新：

我发现由于 checkStatus() 函数是异步的并且被视为一个 promise，所以我可以只使用 checkStatus().then(status and if and everything)。

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

解决方法

您可以在 canActivate() 函数中使用 rxjs 运算符。 例如，'from' 运算符可用于从 promise 中获得可观察性。

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

如果您查看 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);
} );

或者使用可观察对象：

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