Angular Universal：使用 NgRx 在服務器端獲取 Store in Guard

Question

我正在運行一個 Angular 9 通用應用程序，它使用 NgRx 進行 state 管理。 我還使用 ngrx-store-localstorage 將 Store 持久化到用戶的 localStorage 中。

我正在嘗試在使用 Guard 中的 NgRx 訪問某些路由之前檢查用戶是否已登錄：

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    if (isPlatformBrowser(this.platformId)) {
      console.log('browser')
      return this.store.select('user').pipe(
        map(authUser => {
          if (!authUser.id || !authUser.token) {
            console.log(authUser)
            this.router.navigate(['/login'])
            return false
          }
          return authUser.id ? true : false;
        }))
    }
    console.log('server')
    this.router.navigate(['/login'])
    return false
  }

我正在進行平台檢查，因為我的服務器無權訪問商店。 但這會產生不需要的行為，因為它會檢查兩次，有時會在呈現受保護的頁面之前呈現登錄頁面。

您是否知道讓我的服務器了解當前 State 的方法或驗證我的用戶是否已通過身份驗證的替代方法？

Answer 1

我最終使用了 ngx-cookie 插件，它使我的警衛能夠在瀏覽器和服務器上訪問 cookies： https://github.com/ngx-utils/cookies#servermodulets

我的后衛現在看起來像這樣：

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        if (isPlatformBrowser(this.platformId)) {
          var token = this.cookies.getObject('_avoSession')
          if (!token) {
            this.router.navigate(['/login'])
            return false
          }
          console.log(token)
          return true

        }
        if (isPlatformServer(this.platformId)) {
          let cookie = this.cookies.getObject('_avoSession')
          if (!cookie) {
            this.router.navigate(['/login'])
            return false
          }
          return true 
        }

  }

此處的 platformCheck 沒用，因為我的服務器和瀏覽器都可以訪問 cookies，但是如果您需要一些模塊化並為不同的用例添加特定的檢查，它會很有用。

您還可以按照此處的示例和 Observables 來驗證您的 jwt。