Сохраняйте запросы с помощью пользовательской HashLocationStrategy в angular 9 - PullRequest
Новая
       19

Сохраняйте запросы с помощью пользовательской HashLocationStrategy в angular 9

0 голосов
/ 13 января 2020

В настоящее время я работаю над приложением Angular, основанным на 9-й версии R C 6. Я разрабатываю SPA с несколькими микро-приложениями, которые интегрированы как веб-компоненты (с использованием Angular Elements). Для маршрутизации я использую HashLocationStrategy, как описано в «Микро приложениях с веб-компонентами с использованием Angular элементов» (https://www.softwarearchitekt.at/aktuelles/micro-apps-with-web-components-using-angular-elements/) Манфреда Штайера.

Проблема возникает при входе в систему. Я использую OAuth для аутентификации. После перенаправления обратно на мою страницу URL выглядит как http://localhost:4200/?token=...#/callback. Но после того, как путь адаптирован стратегией определения местоположения, запрос отбрасывается. Я стремлюсь к URL, например http://localhost:4200/#/callback?token=....

Мое решение состояло в том, чтобы предоставить CustomHashLocationStrategy, который переопределяет существующее создание пути HashLocationStrategy: 

path(includeHash: boolean = false): string {
  // the hash value is always prefixed with a `#`
  // and if it is empty then it will stay empty
  let path = this.platformLocation.hash == null ? '#' : this.platformLocation.hash;
  // any existing query will be appended
  if (this.platformLocation.search != null) {
    path += this.platformLocation.search;
  }

  return path.length > 0 ? path.substring(1) : path;
}

с моим созданием пути: 

/**
 * Extension of https://github.com/angular/angular/blob/master/packages/common/src/location/hash_location_strategy.ts
 * The extension was necessary because the default HashLocationStrategy ignores query's.
 */
@Injectable()
export class CustomHashLocationStrategy extends HashLocationStrategy {

  constructor(private platformLocation: PlatformLocation, @Optional() @Inject(APP_BASE_HREF) baseHref?: string) {
    super(platformLocation, baseHref);
  }

  path(includeHash: boolean = false): string {
    // the hash value is always prefixed with a `#`
    // and if it is empty then it will stay empty
    let path = this.platformLocation.hash == null ? '#' : this.platformLocation.hash;
    // any existing query will be appended
    if (this.platformLocation.search != null) {
      path += this.platformLocation.search;
    }

    return path.length > 0 ? path.substring(1) : path;
  }

}

Это работает хорошо с моим проектом. Но я также видел другие решения, такие как HashLocationStrategy и параметры запроса в angular 4 . У меня относительно небольшой опыт в разработке больших Angular приложений, и я хотел бы спросить, может ли кто-нибудь дать мне подсказку о моем решении и объяснить, в сравнении с другим, какое из них лучше.

...