角度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()); 
    } 
}); 

} 

我使用火力地堡和订阅的authState变化。 当用户登录时我发送一个动作来更新商店，我只使用authState.profile来过滤用户的预订，所有的工作都很好。我在ngOnInit（）上设置可观察预订$。

Answer 1

这里有几件事要说。

首先，store只是一个普通的内存中的javascript对象。这意味着在页面重新加载它消失了。其次，如果您需要任何类型的用户身份验证数据的持久性，那么您应该在用户登录后将这些数据放入商店（您已经做了），并将其添加到某个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)，并从那里

使用它们可能是有点太多的相关信息，但我希望你能找到你的路它;）