页面刷新时延迟canActivate调用以等待数据加载

Question

当我重新加载我的页面时，它总是转到空白页面而不是同一页面。这背后的原因是一旦用户刷新页面就会调用 canActivate 方法，该方法正在检查用户的权限，并且无法立即获取用户数据。用户数据会在几秒钟后出现。 有什么办法可以让 canActivate 方法等到数据完成？我一直在浏览 RxJS 的页面，但不知道该怎么做。 有人可以给我建议吗？

  constructor(private router: Router, private userDataService: UserDataService) {
    userDataService.userData$.subscribe(
      (data: User) => {
        this.userData = userData --> comes after some seconds
      }
    );
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):         
     Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree 
  {
    const result = this.getUserData(route);
    if (!result) {
      this.blankPage();
    }
    return result;
  }


public getUserData(): Observable<boolean> {
    if (this.userData) {
        check for permissions...
        return of(true);    
    }
    return of(false);
}

userdata.service.ts：

  userDataSubscription: Subscription;
  userData: BehaviorSubject<User> = new BehaviorSubject<User>(null);
  public userData$: Observable<User> = this.userData.asObservable();
  
  
  private getUserData(): void {
    const userData$ = new Observable(
      subscriber => subscriber.next(new User())
    ).pipe(
      delay(1000),
      mergeMap((model: User) => this.getUserInfo(model)),
      mergeMap((model: User) => this.getUserPermission(model)),
      catchError((err, caught) => {
        console.error('failed')
        return caught;
      })
    );
    this.userContextDataSubscription = userData$.subscribe(
      (data: User) => {
        this.userData,next(model);
      },
      () => console.error('failed')
    );
  }

Answer 1

您可能想在这里使用 Angular resolver 而不是守卫。解析器确保数据在路由加载之前可用和加载。

有很多有用的教程，只需搜索“Angular Resolver”即可。

解析器返回一个 Observable。您可能想要使用 RxJS 过滤器和 take(1) 运算符。像这样的：

resolve(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<any>|Promise<any>|any {
  return this.service.getMyData(route.paramMap.get('id')).pipe(
    filter(x => !!x),
    take(1)
  )
}

此处的过滤器可确保数据是真实值。然后 take(1) 基本上说我得到了我需要的东西。一切顺利。

Answer 2

canActive 是一个异步方法，这意味着您可以返回 Observeble 或 Promise，并且在 Observable/Promise 解决之前不会加载路由 这是一个正确的canActivate用法示例：

     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):         
         Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree 
      {
        return this.userDataService.userData$
          .pipe(take(1))
          .pipe(map(user => {
            let result: boolean
            // check your permissions
            if (!result) {
               this.redirectToBlankPage();
               return false;
             }
             return result;
          }));
      }