Question

在这里，当用户通过身份验证或登录时，我正在从本地存储中获取userid，但是即使我访问一个页面又访问另一个页面，但是重新加载页面时，该用户ID却在我登录后立即获取然后得到。

此问题可能是什么原因？

我在标头组件中有徽标，在该徽标中，我给了路由器链接，并将参数传递为userid，该路由器仅在用户登录时才能工作，如果用户注销，则我创建了ng时间登录徽标不会显示且无法使用的方法。将显示其他徽标。

但是问题是我需要重新加载页面，没有重新加载页面就没有得到

这是 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>

这是 header.ts

ngOnInit() {
  debugger;
  this.Userid = localStorage.getItem('user_id');
  this.name = localStorage.getItem('user.name');
}

我想在用户登录后立即获取用户ID。

Answer 1

localStorage存储strings而不是objects。您将必须对对象进行字符串化并将其解析出来。像这样

localStorage.setItem('user', JSON.stringify(user));
let user = JSON.parse(localStorage.getItem('user'));
console.log(user.name);

您可能还想使用服务在标头组件和登录组件之间共享数据。

https://stackblitz.com/edit/angular-qj6kof

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

我建议您有一个处理登录的服务，并且可以查询（而不是localStorage）有关所需信息的信息。

但是

如果按以下方式重构代码，则可以这样做：

ngOnInit() {
  // empty
}

get Userid() {
   return localStorage.getItem('user_id');
}

get name() {
   return localStorage.getItem('user.name');
}

您的 header.html 不需要任何更改。

用户登录后无法从本地存储中正确获取项目

2 个答案: