Angular Универсальный: получить Store в Guard на стороне сервера с помощью NgRx - PullRequest
Новая
       82

Angular Универсальный: получить Store в Guard на стороне сервера с помощью NgRx

1 голос
/ 16 июня 2020

Я запускаю универсальное приложение Angular 9, которое использует NgRx для управления состоянием. Я также использую ngrx-store-localstorage для сохранения хранилища в локальном хранилище пользователя.

Я пытаюсь проверить, вошел ли пользователь в систему перед доступом к определенным маршрутам с NgRx внутри Guard: 

  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
  }

Я провожу проверку платформы, поскольку у моего сервера нет доступа к магазину. Но это создает нежелательное поведение, поскольку он дважды проверяет, а иногда и отображает страницу входа перед отображением защищенной страницы. аутентифицирован?

1 Ответ

1 голос
/ 17 июня 2020

Я закончил тем, что использовал плагин ngx-cook ie, который позволяет моему охраннику получать доступ к файлам cookie в браузере и на сервере: https://github.com/ngx-utils/cookies#servermodulets

Мой охранник выглядит так now: 

    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, но если вам нужна модульность и добавление специальных c проверок для различных вариантов использования, это может быть полезно.

Вы также можете проверить свой jwt, следуя этому примеру здесь с помощью Observables.

...