Question

我想用几秒钟后用canActive方法和响应创建一个路由保护。我用这个：

export class GuardService implements CanActivate {

  constructor(private router: Router,
              private UserInfo: UserInfoService) { }

  canActivate(route: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    setTimeout(() => {
      this.router.navigate(['/']);
      return false;
    }, 2000);
  }
}

所以这个函数在2秒后返回false。我希望工作正常但angular没有编译代码并返回以下错误：

ERROR in src/app/services/guard.service.ts(14,44): error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

它说canActive应该返回一个布尔值，而不是setTimeOut，但是我的后卫是一个异步后卫并且延迟响应是可以的。

Answer 1

由于它返回承诺，可观察或布尔，也许您可以利用它，不要您认为？

如果你想使用承诺（我不推荐），请按照这样的方式

canActivate(...) {
  let p = new Promise((resolve, reject) => {
    setTimeout(() => resolve(true), 2000);
  });
  return p;
}

现在使用Observables，我建议：

canActivate(...) {
  return Observable.of(true).delay(2000);
}

Answer 2

以上是重构为返回Promise的代码示例。打字稿首先抱怨因为你的函数没有返回任何东西，你告诉它你要返回Observable，Promise或boolean。但是你也不能只返回Timer对象，所以我将计时器包装在一个promise中，保持相同的路由器逻辑导航到“/”。让我知道这个是否奏效。请注意，在setTimeout中，它不再返回布尔值，而是使用该值解析它。

export class GuardService implements CanActivate {

  constructor(private router: Router,
              private UserInfo: UserInfoService) { }

  canActivate(route: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return new Promise((resolve) => {
      setTimeout(() => {
        this.router.navigate(['/']);
        resolve(false); 
      }, 2000);
    })
  }
}

在guardTime中的setTimeOut函数中返回布尔值

2 个答案: