Angular 2丢失页面重新加载数据

Question

我像这样从NGRX /存储中获取预订列表，数据可以正确输入，但在页面重新加载时会消失。 我必须更改路线才能恢复原状。

ngOnInit() {

this.store.select(state => state.authState.profile).subscribe(profile => {

  this.profile = profile;
  if (this.profile) {
    this.userId = this.profile.$key;
  }
    });
    if (this.userId) {
    this.reservations$ = this.reservationService.loadUserReservations(this.userId);
  }
 }

   ngOnChanges() {
    if (this.userId) {
    this.reservations$ = 
    this.reservationService.loadUserReservations(this.userId);
      }

  }

不知道这是否足以说明问题。

在我的身份验证服务中

this.auth$.authState.subscribe(user => {
  if (user) {

    const userData = user;
    const userRef = db.object("users/" + userData.uid);

    const dataToSet = {
      displayName: userData.providerData[0].displayName,
      email: userData.providerData[0].email,
      photoURL: userData.providerData[0].photoURL,
      providerId: userData.providerData[0].providerId,
      registeredAt: new Date()
    };

    userRef.take(1).subscribe((user) => {
      if (user.$exists()) {
        // console.log('user exists', user);
        this.store.dispatch(this.authActions.updateUserInfo(user));

      } else {
        // console.log('user does not exists');
        userRef.set(dataToSet)
          .then((result) => {
            // console.log(result)
          })
          .catch((error) => {
            // console.log(error);
          });
      }
    });
    // console.log('hello user', user);
    this.store.dispatch(this.authActions.loginSuccess(user));
  } else {
    this.store.dispatch(this.authActions.logOutUser());
  }
});

}

我正在使用Firebase并订阅authState的更改。 当用户登录时，我调度了一个更新商店的操作，我只使用authState.profile来过滤用户的预订，并且所有工作正常。 我在ngOnInit（）上设置了可观察的Reservations $。

Answer 1

这里有几件事要说。

首先，store只是一个普通的，内存中的javascript对象。 这意味着页面重新加载已不复存在。

其次，如果您需要某种形式的用户Auth数据持久性，则应在用户登录后将该数据放入存储中（您已经执行的操作），并另外将其放入一些localStorage或cookie中。 然后，您应该具有读取localStorage / cookie的机制，以获取身份验证数据并在页面重新加载（或任何页面加载）时重新填充存储。 [这是一个单独的问题，请您根据具体情况提供]

现在，您可能永远不想发生的一件事是，如果用户未登录（例如，如果存储中没有authState数据），该用户最终将进入预订组件。 而这正是正在发生的事情。

您有几种解决方案。 一种可能是最好的方法是拥有AuthGuard，它将在CanActivate中针对您的预订组件使用的路由运行。

所以像这样

CheckAuthGuard：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    return this.store.select(yourPartOfStateWhereAuthDataIs)
      .map(profileData => !!profileData)
      .take(1)
      .do(authenticated => {
        if (!authenticated) {
          this.router.navigate([ 'login' ], {
            queryParams: { referer: this.createUrl(route) }
          });
        }
      });
    }

然后在您的路由中，对于保留组件路由：

{
  path: '',
  component: ReservationsComponent,
  canActivate: [CheckAuthGuard]
}

这将确保：

1. 如果用户最终进入预订组件>有AuthData
2. 如果存储中没有AuthData，则尝试转到预订时>用户将被重定向到登录页面

现在，关于预订的另一件事。 似乎您不是从商店获得预订，而是直接从服务获得预订。 我的建议是实际上为保留部分再增加一个警卫，然后这样做：

1. 负载预留（通过调度ngrx操作，这将依次调用您已经拥有的服务）
2. 当您的商店中充满了注册数据时，您的门卫将允许进入预订部分
3. 在预订组件中，您将进行store.select(PartOfStoreWhereReservationsAre)并从那里使用

可能有太多的信息，但我希望您能通过它找到方法；）