Question

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

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

App有2名警卫，CanActivate和Resolve guard。

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

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

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

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

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

问题：

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

您是否有一些建议如何解决此问题？

解决方案： 解决方案来自回答的问题。这是代码的外观。

解决方案警卫：

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

Answer 1

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

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

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

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

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

1 个答案: