Angular2应用程序在浏览器刷新时无法正确初始化

在开发第一个Angular2应用程序时，我偶然发现应用程序在浏览器中刷新时的问题。Angular2应用程序在浏览器刷新时无法正确初始化

要使用应用程序，用户需要认证。我有authenticationService处理这个，当用户登录时，数据被提取并存储在这个authenticationService中。

App有2名看守，CanActivate和Resolve后卫。

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

我有dataComponent，它在init上从dataService使用userId调用方法。 userId是从userData中的userService中读取的。

以下情景崩溃应用程序。用户登录，一切正常。

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

即使解析后卫激活，也会发生这种情况。在解析警卫获取用户数据之前初始化DataComponent。并且OnInit DataComponent使用错误的userId调用dataService方法。再次，应用程序崩溃。

问题：

解决后卫应该在使用前的数据有不加载路径，对不对？那么为什么组件在Resolve警卫响应之前初始化？

你有一些建议如何解决这个问题？

解决方案： 解决方案来自已回答的问题。这里代码看起来如何。

解析器后卫：

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)); 
     } 
    }); 
}

来源

2017-04-25 user1698635

你能为你的服务和看守显示一些代码吗？ –

已添加代码。期待回复:) – user1698635

解析器不是保护而是一种方式来加载组件的数据，你需要访问组件中的解析数据，如：

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

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

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

来源

2017-04-25 14:17:03

谢谢你的回答。清新问题解决了。只是为了其他人，我会更改有问题的代码，以便他们有示例 – user1698635

Angular2应用程序在浏览器刷新时无法正确初始化

回答

相关问题