Извлеките хэш-фрагмент из url с помощью Angular2

Учитывая эту структуру URL (над которой я не контролирую), как я могу получить хэш-фрагмент с помощью Angular2?

http://your-redirect-uri#access_token=ACCESS-TOKEN

Мой маршрутизатор отправляется на правильный компонент, но все после oauth получает scrapped, и я не могу найти хэш-фрагмент в request.params или location.path. Обреченные??

Конфигурация маршрутизатора:

@RouteConfig([
{path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true},
{path: '/landing/oauth', name: 'Landing', component: LandingComponent}  // this one

])

Ответы

Ответ 1

Для тех, кто все еще ищет:

import { ActivatedRoute } from '@angular/router';

export class MyComponent {

  constructor(
    private route: ActivatedRoute,
  ) { }

  myfunction(){
    this.route.fragment.subscribe((fragment: string) => {
        console.log("My hash fragment is here => ", fragment)
    })
  }
}

Ответ 2

Чтобы расширить текущие ответы, я хотел обратиться к простому способу разбора параметров запроса в хэше (особенно для федеративного ответа), поскольку ActivatedRoute, похоже, не обрабатывает это изначально.

this.route.fragment.subscribe(fragment => {
  const response = _.fromPairs(Array.from(new URLSearchParams(fragment)));
  response.access_token;
  response.id_token;
  response.expires_in;
  response.token_type;
});

Сначала создайте новый объект URLSearchParams с фрагментом для запроса его значений:

new URLSearchParams(fragment).get('access_token');

В большинстве случаев это, вероятно, все, что нужно, но если желательно преобразовать это в объект, Array.from преобразует URLSearchParams в массив массивов, который выглядит следующим образом: [['key', 'value'],...], Затем lodash _.fromPairs преобразует это в объект.

Ответ 3

У меня была такая же проблема, запросив сервер OAuth с response_type= token, и кто перенаправляет на %REDIRECT_URI%#access_token=:access_token&token_type=:token_type&expires_in=:expires_in.

Проблема заключается в том, что по умолчанию прямой доступ к югу от url не маршрутизируется: в вашем случае %BASE_URL%/landing/oauth не будет перенаправлен на компонент LandingComponent.

Я исправил его с помощью этой конфигурации:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { ROUTER_PROVIDERS } from '@angular/router';

import { AppComponent } from './components/app/app.component';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, { useValue: '/' }) // this line
]);

Ответ 4

Вы также можете использовать ActivatedRouteSnapshot без необходимости подписываться на все изменения в нем.

@Component({templateUrl:'./my-component.html'})
class MyComponent {
  constructor(route: ActivatedRoute) {
    const fragment: string = route.snapshot.fragment;
  }
}

Ответ 5

Я взял комментарий от nwayve и реализовал его, используя RxJS-каналы следующим образом:

this.route.fragment
  .pipe(
    map(fragment => new URLSearchParams(fragment)),
    map(params => ({
      access_token: params.get('access_token'),
      id_token: params.get('id_token'),
      error: params.get('error'),
    }))
  )
  .subscribe(res => console.log('', res));

Ответ 6

Вы можете получить фрагмент URL в любое время, используя следующий код, который использует службу Router:

const urlTree = this.router.parseUrl(this.router.url);
console.log(urlTree.fragment); //access_token=ACCESS-TOKEN