Hashfragment ophalen van url met Angular2

Gezien deze url-structuur (waarover ik geen controle heb), hoe kan ik het hash-fragment ophalen met Angular2?

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

Mijn router leidt wel naar de juiste component, maar alles na oauthwordt gesloopt en ik kan het hash-fragment niet vinden in request.params of location.path. Verdoemd??

Routerconfiguratie:

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

])

Antwoord 1, autoriteit 100%

Voor degenen die nog op zoek zijn:

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

Antwoord 2, autoriteit 23%

Om de huidige antwoorden uit te breiden, wilde ik een eenvoudige manier bespreken om de queryparameters in de hash te ontleden (specifiek voor een federatieve reactie), aangezien de ActivatedRoutedat niet standaard lijkt te verwerken .

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

Maak eerst een nieuw URLSearchParams-object met het fragment om vraag naar zijn waarden:

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

In de meeste gevallen is dit waarschijnlijk alles wat nodig is, maar als conversie naar een object gewenst is, converteert Array.fromURLSearchParamsnaar een array van arrays die eruitzien zoals: [['key', 'value'], ...]. Dan converteert lodash’s _.fromPairsdit naar een object.

Antwoord 3, autoriteit 14%

je kunt ook ActivatedRouteSnapshotgebruiken zonder dat je je hoeft te abonneren op alle wijzigingen.

p>

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

Antwoord 4, autoriteit 6%

Ik heb de opmerking van nwayve overgenomen en geïmplementeerd met RxJS-pipes als volgt:

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

Antwoord 5, autoriteit 3%

Ervan uitgaande dat u de klasse ActivatedRoutegebruikt in uw constructor, probeert u dit:

let params = this.route.snapshot.fragment;
const data = JSON.parse(
    '{"' +
        decodeURI(params)
            .replace(/"/g, '\\"')
            .replace(/&/g, '","')
            .replace(/=/g, '":"') +
        '"}'
);
console.log(data); // { json: "with your properties"}

Antwoord 6

Ik had hetzelfde probleem door een OAuth-server aan te vragen met response_type=token, en die omleidt naar %REDIRECT_URI%#access_token=:access_token&token_type=:token_type&expires_in=:expires_in.

Het probleem is dat de directe toegang tot de sub-url standaard niet wordt gerouteerd: in uw geval wordt %BASE_URL%/landing/oauthniet omgeleid naar LandingComponentcomponent.

Ik heb het opgelost met deze configuratie:

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

Antwoord 7

Ik heb dit geprobeerd, maar de snapshot was een lege string. https://stackoverflow.com/a/51286916/569302

Dit is wat voor mij werkte:

 ngOnInit(): void {
    this.route.fragment.subscribe({ 
        next: value => {
        if (value === null) {
          throw new Error('not implemented');
        }
        const access_token = new URLSearchParams(value).get('access_token')
        console.log({access_token})
      }
    });
  }

Antwoord 8

U kunt het url-fragment op elk moment ophalen met behulp van de volgende code – die gebruik maakt van de Router-service:

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

Antwoord 9

Een optie voor het ontleden van de fragmentgegevens met gewoon javascript is

this.activatedRoute.fragment.subscribe(value => {
  let fragments = value.split('&')
  let fragment = {}
  fragments.forEach(x => {
    let y = x.split('=')
    fragment[y[0]] = y[1]
  })
})

De informatie heeft de vorm van een object dat gemakkelijk toegankelijk is.