Retrieve hash fragment from url with Angular2

Question

Given this url structure (over which I have no control), how can I retrieve the hash fragment using Angular2?

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

My router does route to the correct component, but everything after oauth get scrapped and I can't find the hash fragment in request.params or location.path. Doomed??

Router config:

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

])

Ismail H · Accepted Answer · 2017-02-02 10:36:15Z

86

For those still looking :

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

answered Feb 2, 2017 at 10:36

Ismail H

4,5374 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rob Over a year ago

No need to worry about unsubscribing from ActivatedRoute observables: > The ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

nwayve · Accepted Answer · 2018-08-03 19:47:22Z

21

To expand on the current answers, I wanted to address an easy way to parse the query params in the hash (specifically for a federated response) since the ActivatedRoute doesn't seem to handle that natively.

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

First create a new URLSearchParams object with the fragment to query for its values:

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

For most cases this is probably all that is needed, but if converting this to an object is desired, Array.from converts URLSearchParams into an array of arrays that looks like: [['key', 'value'], ...]. Then lodash's _.fromPairs converts this to an object.

answered Aug 3, 2018 at 19:47

nwayve

2,33123 silver badges33 bronze badges

2 Comments

Raz Ronen Over a year ago

The next step after finding this.route.fragment to get the fragment is to search how to parse its queries. Thanks for adding URLSearchParams snippet!

Brendan Over a year ago

Great Answer! I was able to grab the fragment but I was left with multiple params to parse through. Your answer saved me a ton of time!

Aya Azzam · Accepted Answer · 2018-07-11 13:36:24Z

15

you can also use ActivatedRouteSnapshot with no need to subscribe for all changes on it.

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

answered Jul 11, 2018 at 13:36

Aya Azzam

1752 silver badges12 bronze badges

2 Comments

Aya Azzam Over a year ago

@MochamadArifin I think that what you need.

Andrew Howard Over a year ago

Awesome, this is the most simplest solution thanks :)

beeman · Accepted Answer · 2018-11-13 03:50:47Z

5

I've taken the comment from nwayve and implemented it using RxJS pipes like this:

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

answered Nov 13, 2018 at 3:50

beeman

5805 silver badges10 bronze badges

2 Comments

Daniel B Over a year ago

Note that if you have OAuth2.0 access tokens they can include + which will become a whitespace character in your access token.

bluejimmy Over a year ago

@DanielB if you have an access token "4XVjonKI1k+" with a plus sign, and the code above is getting the access token from a URL encoded string then the access token will have a space like ""4XVjonKI1k " instead of the +? To fix this we need to add decodeURIComponent(params.get("access_token"))? Did I understand this correctly?

Tecayehuatl · Accepted Answer · 2019-12-18 21:13:23Z

2

Assuming you're using ActivatedRoute class in your constructor, try this:

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

answered Dec 18, 2019 at 21:13

Tecayehuatl

3082 silver badges11 bronze badges

Comments

Pinguet62 · Accepted Answer · 2016-05-15 11:36:11Z

I had the same problem by requesting OAuth server with response_type=token, and who redirects to %REDIRECT_URI%#access_token=:access_token&token_type=:token_type&expires_in=:expires_in.

The problem is, by default, the direct access to sub-url is not routed: in your case, %BASE_URL%/landing/oauth will not be redirect to LandingComponent component.

I fixed it with this 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
]);

Sameer Basil · Accepted Answer · 2020-03-06 10:36:56Z

1

An option for parsing the fragment data with plain 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]
  })
})

The information will be in the form of an object which can be easily accessed.

answered Mar 6, 2020 at 10:36

Sameer Basil

5067 silver badges12 bronze badges

Comments

Jesus is Lord · Accepted Answer · 2021-07-10 17:59:19Z

1

I tried this, but the snapshot was an empty string. https://stackoverflow.com/a/51286916/569302

Here's what worked for me:

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

answered Jul 10, 2021 at 17:59

Jesus is Lord

15.5k11 gold badges71 silver badges103 bronze badges

Comments

Drenai · Accepted Answer · 2019-06-16 09:58:11Z

0

You can retrieve the url fragment at any time using the following code - which makes use of the Router service:

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

answered Jun 16, 2019 at 9:58

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

Comments

Malcolm Swaine · Accepted Answer · 2023-10-11 18:52:54Z

0

This was the only 'angular only' solution that worked for me (

import { NavigationEnd, Router } from '@angular/router';
...

constructor(
    private router: Router,) {}
...

ngOnInit() { 
    this.router.events.subscribe((event) => {
      if(event instanceof NavigationEnd) {
        console.log("route change url", event.url)
      }
    });
}

from a URL of http://localhost:8100/#/activity prints /activity

answered Oct 11, 2023 at 18:52

Malcolm Swaine

2,31226 silver badges16 bronze badges

Collectives™ on Stack Overflow

Retrieve hash fragment from url with Angular2

10 Answers 10

1 Comment

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

1 Comment

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related