3

我正在尝试解决用户在系统中冒充其他用户后遇到的问题。目前，区域用户可以冒充其他不加载页面全部内容的人，因为他们现在必须按 F5 才能查看此页面上的所有内容。我试图通过指向本地相同的数据库来重现此问题，但无法这样做。例如，当我转到 DEV url 时，我尝试冒充另一个用户，然后部分加载页面并刷新页面 (F5)，我看到了整个内容。我相信这是由于路线导航而发生的，不确定我是否遗漏了要传递此函数的任何内容。

this.router.navigate(['/', user.Company.Abbreviation.toLowerCase()]);

这是 Impersonate 按钮正在执行的全部功能。

setImpersonatation() {
this.store.dispatch(new AuditSearchClearAction());
this.store.dispatch(new CompanyChangedAction(this.impersonationForm.value.company, null));

const user = this.impersonationForm.value.user as UserLogin;
this.store.dispatch(new BaseUserSetAction(user as User));
this.store.dispatch(new AuthorizeAction(user));
this.router.navigate(['/', user.Company.Abbreviation.toLowerCase()]);
this.store.dispatch(new MyWorkSetLetterReminderUserAction(user.UserId));

}

当我切换用户时，我得到下面的屏幕。 在此处输入图像描述

但是当我刷新页面 (F5) 时，我会看到整个数据。 在此处输入图像描述

我是否需要向 router.navigate 添加任何参数以便正确加载页面？单击“模拟”按钮后尝试加载页面时似乎缺少某些内容。谢谢！

更新：

setImpersonatation() {
this.store.dispatch(new AuditSearchClearAction());
this.store.dispatch(new CompanyChangedAction(this.impersonationForm.value.company, null));

const user = this.impersonationForm.value.user as UserLogin;
this.store.dispatch(new BaseUserSetAction(user as User));
this.store.dispatch(new AuthorizeAction(user));
this.store.dispatch(new MyWorkSetLetterReminderUserAction(user.UserId));
**this.changeDetector.detectChanges();
this.router.navigate(['/', user.Company.Abbreviation.toLowerCase()]);**

}

4

1 回答 1

2

在数据尚未准备好生成页面 UI 的情况下，使用解析器始终是一个不错的选择。除非数据完全从服务器获取，否则解析器会阻止您的应用导航。

脚步：

  1. 通过运行以下命令创建解析器服务：
ng generate resolver test-resolver
  1. 你必须把你的ajax调用放在resolver的resolve方法中：
@Injectable({ providedIn: 'root' })
export class TestResolver implements Resolve<Hero> {
  constructor(private service: TestService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return this.service.testAjax();
  }
}
  1. 你必须在你的路由模块中定义你的解析器：
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'test',
        component: TestComponent,
        resolve: {
          test: TestResolver
        }
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}
  1. 您必须在组件中捕获响应（在本例中为 TestComponent）：
@Component({
  selector: 'app-test',
  template: ``
})
export class TestComponent {
  constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.data.subscribe((data) => {
      console.log(data.test);
    });
  }
}

通过这种方式，只有当数据完全加载时，您才会导航到下一页，并且此功能可以更轻松地实现更好的用户体验，例如在导航到需要获取一些数据的页面时加载。

于 2021-09-22T08:36:07.237 回答