how to call method when I moved from login component to home component Angular?

Question

So in my login component, I generate one token that gives me access to Tablaue dashboard from the angular app

so when I log in at that time only the home component method should call/run. but when I refresh the home page(component) should not run/call that method

Example

login-page.component.ts
public getToken(){
// i received token here
// then i move to the home page component
// saving token into the session
this.router.navigate(["/home"]);

}

home-page.component.ts
public  tokenAccess(){
// this method will be run only once when I come from the login page.
// should not run when the page is refreshed or reloaded
}

Thank you

How do you go from login-page to home-page? Using Angular router or some other means? — ruth, Apr 16 '21 at 11:44

score 1 · Answer 1 · answered Apr 16 '21 at 11:54

1

Expanding from your comment, you could send a query parameter in the route to denote if the token has indeed been fetched in the login-page component.

login-page.component.ts

public getToken(){
  this.router.navigate(["/home"], { queryParams: { token: true }});
}

The resulting routing URL would be of the form

http://example/home?token=true

The query parameter token would only be present when routed from the login-page component and not on page refresh or reload.

home-page.component.ts

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

constructor(private _actRoute: ActivatedRoute) { }

ngOnInit() {
  this._actRoute.queryParams.subscribe(params => {
    if (params['token']) {      // <-- condition would fail on page refresh/reload
      this.tokenAccess();
    }
  });
};

answered Apr 16 '21 at 11:54

ruth

29,535
4
30
57

let me try this out – Shree Batale Apr 16 '21 at 11:57
condition is not getting failed while page refresh and reload :/ – Shree Batale Apr 16 '21 at 12:02
That's right. The parameter would be persisted if it was already available. You could look into this workaround using `sessionStorage`. Variable stored in `sessionStorage` are not persisted b/n page refresh/reload. – ruth Apr 16 '21 at 12:08
After subscribing can we destroy this subscribe? – Shree Batale Apr 16 '21 at 12:10
Theoretically you could, but I'd be good practice to close the subscription in the `ngOnDestroy()` hook. – ruth Apr 16 '21 at 12:22
ngOnDestroy() { this._actRoute.queryParams; } is it right? – Shree Batale Apr 16 '21 at 12:35
@ShreeBatale: No you either need to use `unsubscribe` or see here: https://stackoverflow.com/a/60223749/6513921 – ruth Apr 16 '21 at 14:48

how to call method when I moved from login component to home component Angular?

1 Answers1