web-dev-qa-db-fra.com

Récupérer un fragment de hachage à partir d'url avec Angular2

Étant donné cette structure d'URL (sur laquelle je n'ai aucun contrôle), comment puis-je récupérer le fragment de hachage en utilisant Angular2? 

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

Mon routeur achemine vers le bon composant, mais tout ce qui suit la oauth est mis au rebut et je ne trouve pas le fragment de hachage dans request.params ou location.path. Condamné ??

Configuration du routeur:

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

])

typescriptangular2-routing
23
MFB

Pour ceux qui cherchent encore:

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)
    })
  }
}
31
Ismail H

Pour développer les réponses actuelles, je voulais aborder un moyen simple d’analyser les paramètres de requête dans le hachage (en particulier pour une réponse fédérée), car la variable ActivatedRoute ne semble pas gérer cela de manière native.

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;
});

Commencez par créer un nouvel objet URLSearchParams avec le fragment à interroger pour obtenir ses valeurs:

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

Dans la plupart des cas, c'est probablement tout ce dont vous avez besoin, mais si vous souhaitez le convertir en objet, Array.from convertit URLSearchParams en un tableau de tableaux ressemblant à: [['key', 'value'], ...]. Ensuite, le _.fromPairs de lodash le convertit en objet.

7
nwayve

J'ai eu le même problème en demandant au serveur OAuth avec response_type = token, et qui redirige vers %REDIRECT_URI%#access_token=:access_token&token_type=:token_type&expires_in=:expires_in.

Le problème est que, par défaut, l'accès direct à la sous-URL n'est pas routé: dans votre cas, %BASE_URL%/landing/oauth ne sera pas redirigé vers le composant LandingComponent.

Je l'ai corrigé avec cette configuration:

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
]);
1
Pinguet62

vous pouvez également utiliser ActivatedRouteSnapshot sans avoir à vous abonner à toutes les modifications qui y sont apportées.

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

J'ai pris le commentaire de nwayve et je l'ai implémenté en utilisant des pipes RxJS comme ceci:

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));
0
beeman