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。