javascript - 为什么在使用@angular/redux-store 中的@select 时，Angular 守卫的行为会有所不同

Question

• 我有一个使用两个守卫的 Angular 设置。 canLoad 和 canActivate
• 两者都通过 @select 从@angular-redux/store 获取相同的可观察值

问题:为什么 canActivate 与 @select 返回的可观察对象一起工作，而 canLoad 会中断所有路由然后呢？这两个守卫有什么区别？

相关 Angular 问题:https://github.com/angular/angular/issues/18991

auth.guard.ts

@Injectable()
export class AuthGuard implements CanLoad, CanActivate {

  @select() readonly authenticated$: Observable<boolean>; // @angular-redux/store

  canLoad(): Observable<boolean> | boolean {
    // return true; // works
    return this.authenticated$; // ERROR: all routing stops from and to the current page
  }

  canActivate(): Observable<boolean> | boolean {
    // return true; // works
    return this.authenticated$; // works
  }

}

app-routing.module

const routes: Routes = [
  {
    path: '',
    component: SomeAComponent,
    pathMatch: 'full'
  },
  {
    path: 'someb',
    component: SomeBComponent,
    canActivate: [
      AuthGuard
    ],
  },
  {
    path: 'lazy',
    loadChildren: './lazy/lazy.module#LazyModule',
    canLoad: [
      AuthGuard
    ]
  },
  {
    path: '**',
    redirectTo: '/'
  }
];

Answer 1

我遇到了同样的问题，所以要解决它并在 CanLoad 和 CanActivate 中工作，您应该添加 operator take(1)

@Injectable()
export class AuthGuard implements CanLoad, CanActivate {

  @select() readonly authenticated$: Observable<boolean>; // @angular-redux/store

  canLoad(): Observable<boolean> | boolean {
    // return true; // works
    return this.authenticated$.pipe(take(1));
  }

  canActivate(): Observable<boolean> | boolean {
    // return true; // works
    return this.authenticated$; 
  }

}