Conceal multiple parameters within routing for added security

Question

Conceal multiple parameters within routing for added security

I have setup my Angular component with a button that triggers an event. Inside this event, I currently have:

this.router.navigate('page2')

While I am aware that query parameters can be passed inside the URL, I am faced with the challenge of passing a list of strings to the new page. Typically, if I had to open page2 with just one entity to query, I would use:

url.../page2/entity1

However, in my scenario, I need to send multiple entities (such as entity2, entity3, and entity4) to page2 without using query parameters since there could potentially be hundreds or even thousands of them!

So my question is, what is the most efficient way to pass these elements to another page using routing? I want to ensure that even if I pass multiple parameters without including them in the URL, I don't lose the results upon refreshing the page. Is there a solution for this?

angular typescript

Answer 1

Answer №1

According to the Angular documentation, you can utilize the NavigationExtras object to transmit supplementary data as state or queryParams. For more information, visit https://angular.io/api/router/NavigationExtras.

An object named extraParams can be used to input additional parameters.

import { Router, NavigationExtras } from '@angular/router';
  ...
constructor(private router: Router) { }

let extraParams: NavigationExtras = {
  state: {
      productId: selectedProductId
  } 
};

this.router.navigate(['/products/details'], extraParams);

These parameters remain hidden in the URL and can only be accessed on the target page using Router.

constructor(private router: Router) {
const currentState = this.router.getCurrentNavigation();
if (currentState && currentState.extras && currentState.extras.state) {
      let productId:string = console.log(currentState.extras.state.productId );
    } 
}

Answer 2

According to the Angular documentation, you can utilize the NavigationExtras object to transmit supplementary data as state or queryParams. For more information, visit https://angular.io/api/router/NavigationExtras.

An object named extraParams can be used to input additional parameters.

import { Router, NavigationExtras } from '@angular/router';
  ...
constructor(private router: Router) { }

let extraParams: NavigationExtras = {
  state: {
      productId: selectedProductId
  } 
};

this.router.navigate(['/products/details'], extraParams);

These parameters remain hidden in the URL and can only be accessed on the target page using Router.

constructor(private router: Router) {
const currentState = this.router.getCurrentNavigation();
if (currentState && currentState.extras && currentState.extras.state) {
      let productId:string = console.log(currentState.extras.state.productId );
    } 
}

Conceal multiple parameters within routing for added security

Answer №1

Similar questions

The automatic renewal of silent access tokens in Oidc client js fails due to the failure of the sliding expiration feature of the identity server authentication cookie

Leveraging two variables in *ngIf

Angular2: Issue encountered while processing click event

Compilation in TypeScript taking longer than 12 seconds

Integration of SSR is not possible in an ongoing Spartacus project

When you subscribe to a forkJoin, you will receive an error notification

How to store property transformation in Redux/ngrx

Transferring an Image File from Angular 8 to a Spring Boot Application

Confidently set up a proxy that is recursively nested and strongly typed

Can you explain the functionality of this Angular CLI instruction?

Struggling with Angular CLI installation on Mac?

Error in Typescript: The type 'string' cannot be assigned to the type '"allName" | `allName.${number}.nestedArray`' within the react hook form

Recording the details of an Angular project through the utilization of Compodoc

Creating custom generic functions such as IsAny and IsUnknown that are based on a table of type assignability to determine

strange complications with importing TypeScript

Dependency on Angular's HTTP service inside a component

How can I resolve the issue of "Errors detected in your package-lock.json" in NGRX?

Rendering in Angular 2 is exclusively done through the use of arrow functions

Manipulate classes by adding or removing them on click events in Angular

Troubleshooting Authorization Header Issue in Angular 5