Angular защита маршрутизатора с Observable не работает после обновления страницы

Question

У меня есть следующий Angular Guard:

export class AdminGuard implements CanActivate {
  constructor(
    private readonly router: Router,
    private readonly userService: UserService
  ) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

      return this.userService.getUserRoles().pipe(
        map(roles => {
          if (roles.admin) {
            return true
          }

          this.router.navigate(['/'])
          return false
        })
      )
  }
}

Это метод из службы, который возвращает Observable:

  public getUserRoles(): Observable<any> {
    return this.store.pipe(
      select('user'),
      map(({ roles }) => roles)
    )
  }

И это работает, когда я перемещаюсь между страницами , но когда я напрямую ввожу в URL какой-либо маршрут, например myapp.com/admin, он автоматически возвращает false и защита не работает. Как заставить его работать правильно?

Answer 1

Лучшее предположение, при вводе URL-адреса непосредственно в браузере вы перезапускаете приложение, и хранилище сбрасывается до значений по умолчанию без пользователя. был аутентифицирован перед чтением ролей, а не только для чтения состояния хранилища. Если вы, например, используете OAuth2, это перенаправит пользователя на вашу конечную точку аутентификации, передав соответствующее состояние для возобновления на маршруте myapp.com/admin после завершения подтверждения повторной аутентификации и заполнения хранилища.

Особенности Это будет во многом зависеть от того, какой подход аутентификации вы используете.