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

Question

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.

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

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

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.

You can use LocalStorage, Cookies or services to transfer data. — alt255, Mar 03 '19 at 13:30
In traditional way, we will use post method to pass the huge data, So dont know how to pass the object without appearing in URL — Ashok Kumar, Mar 03 '19 at 13:37
angular routes are reserved for the router. the only time you would pass data through a URL param would be if your route looked like `users/:id`. `:id` is a dynamic param variable. but when passing multiple data params in angular, you'll want to use Services as good practice. — francojay, Mar 03 '19 at 15:26

Med Aziz CHETOUI · Answer 1 · 2019-03-03T15:49:44.540

After any refresh of the page all the component of Angular project are destroyed and reinitialize again, at this point all data are gone and you haven't any information from LoginComponent

To resolve this problem, you need to use SessionStorage to save this data on browser and this data will gone when you close this page (not refresh) or you can use LocalStorage and the difference between those is a SessionStorage delete data after delay.

to use session storage:

Save data

    sessionStorage.setItem('key', value);

Get data

    sessionStorage.getItem('key');

for more information about session storage you can read this document MDN web docs : Window.sessionStorage

score 0 · Accepted Answer · answered Mar 03 '19 at 15:52

0

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

answered Mar 03 '19 at 15:52

Franklin Pious

3,360
3
23
29

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

2 Answers2