时间戳

首页 > 解决方案 > 用户登录时无法从本地存储中正确获取项目

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

问题描述

在这里，当用户经过身份验证或登录时，我userid从 localstorage 获取，但是当我登录时，即使我访问一个页面到另一个页面仍然没有得到，但是当我重新加载页面然后获取时，该用户 ID 正在获取。

什么可能导致此问题？

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

但是当问题是我需要重新加载页面时，没有重新加载页面就不会

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

标签： angulartypescript

解决方案

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

推荐阅读