角度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)，並從那裏

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