Angular2: Grabbing the hash fragment from a URL

Question

Angular2: Grabbing the hash fragment from a URL

Is there a way to retrieve the hash fragment using Angular2 from a URL structure that I don't have control over?

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

After setting up my router configuration, it seems like everything after oauth is being ignored and I can't access the hash fragment in request.params or location.path. Any solutions?

Router config:

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

])

typescript angular2-routing

Answer 1

Answer №1

If you're in search of a solution:

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

export class MyComponent {

  constructor(
    private route: ActivatedRoute,
  ) { }

  retrieveHash(){
    this.route.fragment.subscribe((fragment: string) => {
        console.log("The hash fragment is visible => ", fragment)
    })
  }
}

Answer 2

If you're in search of a solution:

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

export class MyComponent {

  constructor(
    private route: ActivatedRoute,
  ) { }

  retrieveHash(){
    this.route.fragment.subscribe((fragment: string) => {
        console.log("The hash fragment is visible => ", fragment)
    })
  }
}

Answer 3

Answer №2

Expanding further on the current responses, I want to discuss a simple method for parsing query parameters in the hash (particularly for a federated response) when the ActivatedRoute does not handle it directly.

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

Start by creating a new URLSearchParams object with the fragment to retrieve its values:

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

In most cases, this should be sufficient. However, if you wish to convert this into an object, you can use Array.from to convert URLSearchParams into an array of arrays in the format: [['key', 'value'], ...]. Then, lodash's _.fromPairs can transform this into an object.

Answer 4

Expanding further on the current responses, I want to discuss a simple method for parsing query parameters in the hash (particularly for a federated response) when the ActivatedRoute does not handle it directly.

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

Start by creating a new URLSearchParams object with the fragment to retrieve its values:

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

In most cases, this should be sufficient. However, if you wish to convert this into an object, you can use Array.from to convert URLSearchParams into an array of arrays in the format: [['key', 'value'], ...]. Then, lodash's _.fromPairs can transform this into an object.

Answer 5

Answer №3

Another option is to utilize ActivatedRouteSnapshot without the necessity of subscribing to all changes.

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

Answer 6

Another option is to utilize ActivatedRouteSnapshot without the necessity of subscribing to all changes.

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

Answer 7

Answer №4

After receiving feedback from nwayve, I have successfully incorporated their comment into my code using the power of RxJS pipes. Here is how it looks now:

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

Answer 8

After receiving feedback from nwayve, I have successfully incorporated their comment into my code using the power of RxJS pipes. Here is how it looks now:

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

Answer 9

Answer №5

If you are utilizing the ActivatedRoute class within your constructor, consider implementing this solution:

let parameters = this.route.snapshot.fragment;

const jsonData = JSON.parse(
    '{"' +
        decodeURI(parameters)
            .replace(/"/g, '\\"')
            .replace(/&/g, '","')
            .replace(/=/g, '":"') +
        '"}'
);

console.log(jsonData); // { json: "with your properties"}

Answer 10

If you are utilizing the ActivatedRoute class within your constructor, consider implementing this solution:

let parameters = this.route.snapshot.fragment;

const jsonData = JSON.parse(
    '{"' +
        decodeURI(parameters)
            .replace(/"/g, '\\"')
            .replace(/&/g, '","')
            .replace(/=/g, '":"') +
        '"}'
);

console.log(jsonData); // { json: "with your properties"}

Answer 11

Answer №6

Encountering a similar issue when making a request to the OAuth server using response_type=token, which redirects to

%REDIRECT_URI%#access_token=:access_token&token_type=:token_type&expires_in=:expires_in

.

The issue stems from the default routing configuration where direct access to sub-URLs is not handled properly. For example, %BASE_URL%/landing/oauth may not redirect to the expected LandingComponent.

To resolve this, I implemented the following 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
]);

Answer 12

Encountering a similar issue when making a request to the OAuth server using response_type=token, which redirects to

%REDIRECT_URI%#access_token=:access_token&token_type=:token_type&expires_in=:expires_in

.

The issue stems from the default routing configuration where direct access to sub-URLs is not handled properly. For example, %BASE_URL%/landing/oauth may not redirect to the expected LandingComponent.

To resolve this, I implemented the following 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
]);

Answer 13

Answer №7

One way to extract fragment data using vanilla JavaScript is by following this approach:

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

The extracted information will be stored in an object format for easy retrieval.

Answer 14

One way to extract fragment data using vanilla JavaScript is by following this approach:

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

The extracted information will be stored in an object format for easy retrieval.

Answer 15

Answer №8

After attempting the method mentioned in a reference link, I encountered an unexpected result where the snapshot turned out to be an empty string. The solution that proved successful for me can be found at

The approach that worked in my case is illustrated below:

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

Answer 16

After attempting the method mentioned in a reference link, I encountered an unexpected result where the snapshot turned out to be an empty string. The solution that proved successful for me can be found at

The approach that worked in my case is illustrated below:

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

Answer 17

Answer №9

To obtain the URL fragment anytime, simply utilize this code snippet that leverages the Router service:

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

Answer 18

To obtain the URL fragment anytime, simply utilize this code snippet that leverages the Router service:

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

Answer 19

Answer №10

This particular approach using Angular exclusively proved to be the most effective for addressing my issue.

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

When navigating from a URL like http://localhost:8100/#/activity, it correctly logs /activity

Answer 20

This particular approach using Angular exclusively proved to be the most effective for addressing my issue.

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

When navigating from a URL like http://localhost:8100/#/activity, it correctly logs /activity

Angular2: Grabbing the hash fragment from a URL

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Similar questions

Troubleshooting issues with TypeScript D3 v4 module import functionality

The Angular Material Autocomplete component fails to show items upon upgrading the angular/material package to the newest version

What is the best way to obtain the dimensions of an image in Angular 2 (or newer) before uploading it to the server, and can this be accomplished without utilizing jQuery?

Angular 2: The linting error shows up as "Anticipated operands need to be of the same type or any"

MobX React not causing re-render when props change

How to Redirect between Controllers in Nest.Js

Accessing Nested Arrays in Angular 8: Retrieving Data in HTML Template from Multiple Layers of Arrays

Typescript: Variable of unspecified type

How can we use Javascript to determine if there are any duplicated IDs within an array containing multiple arrays?

Modify typescript prior to typechecking

What is the method for placing a title in the initial column with the help of v-simple-table from Vuetify.js?

Angular Validators are behaving inconsistently, as they only work intermittently before stopping altogether once the application is

Showing the date object in a react component

Is it possible to incorporate JavaScript files into a TypeScript (ts, tsx) project that has already been built?

What are the methods used in TypeScript to implement features that are not available in JavaScript, despite TypeScript ultimately being compiled to JavaScript?

Clear the input field once an item has been successfully added to the array

Using Material UI with React and TypeScript

Utilizing Angular 14 to dynamically import modules during execution

Encountering HttpErrorResponse when sending a Delete request in Angular

Troubleshoot: TypeScript - Issue encountered while utilizing conditional types with enum in a generic function