Angular 通用：使用 NgRx 在服务器端获取存储在 Guard 中

Question

我是 运行 一个 Angular 9 通用应用程序，它使用 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
  }

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

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

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，但如果您需要一些模块化并为不同的用例添加特定的检查，它会很有用。

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