1

我想用 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 中，但我的守卫是异步守卫，延迟响应是可以的。

4

2 回答 2

1

这是上面重构以返回 Promise 的代码示例。Typescript 首先抱怨，因为您的函数没有返回任何内容，并且您告诉它您将返回 Observable、Promise 或布尔值。但是你也不能只返回 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);
    })
  }
}
于 2017-12-11T08:23:49.693 回答
1

由于它返回一个promise、Observable或boolean，也许你可以利用它，你不觉得吗？

如果您想使用承诺（我不推荐），请像这样

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

现在使用 Observables，我推荐：

canActivate(...) {
  return Observable.of(true).delay(2000);
}
于 2017-12-11T08:10:32.587 回答