Angular2 App在浏览器刷新时初始化不正确-Java 学习之路

在开发第一个Angular2应用程序时，我偶然发现了在浏览器中刷新应用程序时遇到的问题 .

要使用应用程序，用户需要进行身份验证 . 我有authenticationService来处理这个问题，当用户登录时，数据被提取并存储在此authenticationService中 .

应用程序有2名警卫，CanActivate和Resolve后卫 .

解析guard，如果authenticationService中存在用户数据，则返回true . 如果没有或发生错误，应用程序将导航到登录页面 .

我有dataComponent，它使用userId从dataService进行init调用方法 . userId是从userData读取的，来自userData .

以下场景崩溃应用 . 用户已登录，一切正常 .

刷新浏览器时，dataComponent在authenticationService获取用户数据之前初始化 . 因此，错误的userId被发送到dataService并且应用程序崩溃 .

即使激活了解决方案防护，也会发生在解析保护获取用户数据之前初始化DataComponent . 并且OnInit DataComponent使用错误的userId调用dataService方法 . 再次，应用程序崩溃 .

Questions:

在数据出现之前，应该使用Resolve guard来加载路由，对吧？那么为什么在Resolve Guard响应之前初始化组件？

你有什么建议如何解决这个问题？

Solution: 解决方案来自已回答的问题 . 代码看起来如何 .

解决方案后卫：

resolve(): Observable<UserData> {
    return this.authenticationService.getUserData();

路由：

{ path: 'admin/dashboard', component: DashboardComponent, resolve: {user: ResolverGuard} },

仪表板：

ngOnInit(): void {
    this.activatedRoute.data.subscribe((data:{user:UserData}) => {
        if (data.user) {
            this.dashboardService.getDashboard(data.user.id)
                .subscribe(dashboard => { this.dashboard = dashboard }, err => console.log(err));
        }
    });
}

1 回答

解析器不是保护，而是加载组件数据的方法，您需要在组件中访问此已解析数据，如：

// routing
  {
    path: 'myroute',
    component: MyComponent,
    resolve: {user: MyResolver}
  }

 // component constructor
 constructor(...
          private activatedRoute: ActivatedRoute) {}

  // ngOnInit
 this.activatedRoute.data
  .subscribe((data: {user}) => {
    // do stuff
  });

回复于 2024-05-16T10:00:07+08:00

Angular2 App在浏览器刷新时初始化不正确

1 回答

相关问题