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

Question

I get a list of reservations from the NGRX/store like this, the data comes in properly but disappears when the page reloads. I have to change routes to get it back.

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

  }

not sure if this is enough code to illustrate the problem.

in my auth service

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

}

I'm using Firebase and subscribing to the authState changes. when the user log ins I dispatch an action to update the store, I'm only using the authState.profile to filter the user's reservations and all the works fine. I'm setting the observable reservations$ on ngOnInit().

Answer 1

There are several things to say here.

First of all, store is just a plain, in-memory, javascript object. That means that on page reload its gone.

Second, if you need any kind of persistance of user Auth data then you should, upon user logs in, put that data into store (what you already do) and additionally put it into some localStorage or cookie. Then you should have mechanism of reading the localStorage/cookie to get auth data and refill store on page reload (or any page load, for that matter). [This is a separate issue, just givin you context]

Now, one thing you probably never want ot happen is that user ends up on your reservations component if he is not logged in (in other words, if there are no authState data in store). And that is exactly what is happening.

You have several options to solve this. One, probably best, is to have AuthGuard that will run in CanActivate for the route that your reservation component uses.

So, something like this...

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

and then in your routing, for reservations component route:

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

this will ensure that:

1. if user ends up on reservations component > there is AuthData
2. if there is no AuthData in store, when attempting to go to reservations > user will get redirected to login page

Now, one additional thing about getting reservations. Seems like you are not getting reservations from store but from service directly. What i'd suggest is to actually put one more guard, for Reservations component and there do:

1. Load Reservations (through dispatching ngrx action which will in turn call service you already have)
2. When your store is filled with Registration data, then your guard will allow going to Reservations component
3. in your reservations component you would do store.select(PartOfStoreWhereReservationsAre) and use them from there

It might be a bit too many infos but i hope you'll find your way through it ;)