Angular Universal：使用 NgRx 在服务器端获取 Store in Guard

Question

我正在运行一个使用 NgRx 进行状态管理的 Angular 9 Universal 应用程序。 我还使用 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
  }

我正在进行平台检查，因为我的服务器无权访问商店。 但这会产生不必要的行为，因为它会检查两次，有时会在呈现受保护的页面之前呈现登录页面。

您是否知道让我的服务器知道当前状态的方法或验证我的用户是否已通过身份验证的替代方法？

Answer 1

我最终使用了 ngx-cookie 插件，它使我的守卫能够访问浏览器和服务器上的 cookie：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 没用，因为我的服务器和浏览器都可以访问 cookie，但是如果您需要一些模块化并为不同的用例添加特定的检查，它会很有用。

您还可以按照此示例 here 使用 Observables 来验证您的 jwt。