I am facing an issue with retrieving the userid from local storage when a user is authenticated or logged in. The user id is not being fetched immediately upon logging in, and even when navigating from one page to another, it remains unavailable until I reload the page.
What could be causing this problem?
In my header component, I have a logo that includes a router link with the parameter userid. This router link only works when a user is logged in. If the user logs out, an ng if method is used to display a different logo instead of the logged-in one.
The issue arises when the user needs to manually reload the page for the userid to be fetched.
This is the code snippet from header.html:
<a class="navbar-brand" routerLink="" *ngIf="!this.authService.isAuthenticated()">
<img src="assets/img/logo.png" alt="WAZ_logo">
</a>
<a class="navbar-brand" routerLink="/user-survey/{{Userid}}/{{name}}" *ngIf="this.authService.isAuthenticated()">
<img src="assets/img/waz_home.png" alt="WAZ_logo">
</a>
And here is the code from header.ts:
ngOnInit() {
debugger;
this.Userid = localStorage.getItem('user_id');
this.name = localStorage.getItem('user.name');
}
I am looking for a solution to retrieve the userid as soon as the user is logged in without requiring a manual page reload.