Search code examples
angularangular-ui-router

Angular 7 How to pass the object from login page to home page

We are working on Angular migration projects. For that, I have created a Angular 7 app with login & home page. After the successful login of the user login component pass the value to home component. And it is huge data like Page Authorization, roles, Business Units [Around 166 KB]. And service was written in someone.

  1. I call the service to validate the user and the service returning the data (which means successful login).

  2. I'm using following lines of code to redirect to home page with data 

    let navigationExtras : NavigationExtras = {
  queryParams : { 
    "data": JSON.stringify(data)
  }
};
this.route.navigate(['/home'],navigationExtras);

  3. In home page following used to get the data

    this.route.queryParams
  .subscribe(params => {
    this.data= JSON.parse(params["data"]);
    this.lstUserBusinessUnitDetails = this.data.lstUserBusinessUnitDetails;
  });

Problem is am getting the data in URL and when I refresh the page getting The connection was reset error. URL looks like below: http://localhost:4211/home?data=%7B%22lstUserCompanyDetails%22:%5B%5D,%22lstU....

Please advice.

Solution

  • if you are using Angular 7.2 and if you trying to pass data between routes , you could make use of the latest feature provide by Angular. Refer this link.

    https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb