时间戳

首页 > 解决方案 > 将数据传递给 Angular Guard CanActivateChild

javascript - 将数据传递给 Angular Guard CanActivateChild

问题描述

我实际上得到了多个守卫，它们共享从我的 API 调用的完全相同的数据。

我的守卫是这样的：

export class GuardBlockAgent implements CanActivateChild {
 ...

 canActivateChild(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> | boolean {

        return this.userService.retrieveMyUser(null, environment.liveMode).map(
        ...
    )}

我正在寻找一种在我的警卫之间共享我的数据的方法。而不是多次调用相同的数据。

在这篇文章中，他们使用这种方式canActivate

{ 
  path: 'super-user-stuff', 
  component: SuperUserStuffComponent,
  canActivate: RoleGuard,
  data: {roles: ['SuperAdmin', ...]}
}

但是如何传递来自我的 API 的动态数据呢？

主题路由.module.ts

const routes: Routes = [
    {
        "path": "",
        "component": ThemeComponent,
        "resolve": { me: AgentResolver },
        "canActivate": [AuthGuard],
        "children": [
            {
                "path": "...",
                "loadChildren": "...",
                "canActivateChild": [GuardBlockAgent]
            },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ThemeRoutingModule { }

编辑： localStroage 不安全，这就是为什么我不想使用它。

标签： javascriptangular

解决方案

您可以为您的UserService. 该层存储您的用户以供运行时使用，如果数据存在，它不会向服务器发送请求。

检查stackBlitz示例。（检查控制台）

创建它；

第 1 步：创建外观服务。

用户服务.facade.ts

@Injectable({
  providedIn: 'root'
})
export class UserServiceFacade extends UserService {
  private readonly user$ = new BehaviorSubject<{ name: string } | null>(null);

  retrieveMyUser(): Observable<{ name: string }> {
    return this.user$.pipe(
      startWith(this.user$.value),
      switchMap(user => (user ? of(user) : this.getUserFromServer())),
      take(1)
    );
  }

  private getUserFromServer() {
    return super.retrieveMyUser().pipe(tap(user => this.storeUser(user)));
  }

  private storeUser(user: { name: string }): void {
    this.user$.next(user);
  }
}

第 2 步：覆盖UserService令牌的依赖注入。

app.module.ts 或您提供的任何位置UserService

  providers: [
    {
      provide: UserService,
      useClass: UserServiceFacade
    }
  ],

它完成了！

推荐阅读