CanActivate等待和从商店获取

Question

我的类中有next方法，它从CanActivate实现：

export class CanActivateLoginedInforamtion implements CanActivate {
  constructor(private store: Store<AppState>) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>{
    return timer(10000).pipe(
      () => this.store.select(({ user: { loginState }}) => {          
        console.log(loginState); 
        return loginState === 'LOGINED' 
      })
    );
  }
}

但是，我的store.select立即返回，而不是等待10秒，为什么？

使用promise时：

​

export class CanActivateLoginedInforamtion implements CanActivate {
  constructor(private store: Store<AppState>) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean>{
    return new Promise((resolve) => {
      this.store.select(({ user: { loginState }}) => { 
        console.log(loginState); resolve(loginState === 'LOGINED');
      })
    })
  }
}

​

Answer 1

这是与您的基于promise的示例等效的可观察性：

export class CanActivateLoginedInforamtion implements CanActivate {
  constructor(private store: Store<AppState>) {}

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

  private isLoggedIn(): Observable<boolean> {
    return this.store.select(({ user: { loginState }}) => {          
      return loginState === 'LOGINED';
    });
  }
}

this.store.select()将返回Observable<boolean>，因此您可以简单地从canActivate返回它。我已经将商店查询移到了一个新函数中，希望能让它更清晰一些。

如果出于某种原因，您希望在进行调用之前等待10秒，则可以在管道中使用switchMap在timer过期之后查询您的存储。这相当于将承诺链接在一起。

您还需要使用take(1)来限制您想要接收的计时器事件的数量。

export class CanActivateLoginedInforamtion implements CanActivate {
  constructor(private store: Store<AppState>) {}

  canActivate(route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return timer(10000).pipe(
      take(1),
      switchMap(() => this.isLoggedIn())
    );
  }

  private isLoggedIn(): Observable<boolean> {
    return this.store.select(({ user: { loginState }}) => {          
      return loginState === 'LOGINED';
    });
  }
}