Angular 通用 : Get Store in Guard on Server-side using NgRx

Question

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

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

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

Answer 1

我最终使用了 ngx-cookie 插件，使我的 guard 能够访问浏览器和服务器上的 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 验证您的 jwt与可观察的。