angular 无法从会话存储中获取用户数据

Question

对不起我的英语。我使用会话存储来保存数据。在会话存储中有数据 enter image description here

但在 html 中，未显示会话存储中的数据。当我在 html 中只获得 {{currentUser}} 时，显示如下 enter image description here 我的代码服务

import { Injectable } from '@angular/core';

const USER_KEY = 'auth-user';

@Injectable({
providedIn: 'root'
})
export class TokenStorageService {
  constructor() { }

  signOut(): void {
   window.sessionStorage.clear();
   }



  public saveUser(user: any): void {
    window.sessionStorage.removeItem(USER_KEY);
    window.sessionStorage.setItem(USER_KEY, JSON.stringify(user));
  }

 public getUser(): any {
   const user = window.sessionStorage.getItem(USER_KEY);
    if (user) {
     return JSON.parse(user);
    }

   return {};
   }
 }

html

<div class="container" *ngIf="currentUser; else loggedOut">
<header class="jumbotron">
  <h3>
    <strong>{{ currentUser.employee_code }}</strong> Profile
  </h3>
</header>
<p>
  <strong>Token:</strong>
  {{ currentUser.accessToken.substring(0, 20) }} ...
  {{ currentUser.accessToken.substr(currentUser.accessToken.length - 20) }}
</p>
<p>
  <strong>Emp:</strong>
  {{ currentUser }}
</p>

</div>
{{ currentUser }}
<ng-template #loggedOut>
  Please login.
</ng-template>

和组件

import { Component, OnInit } from '@angular/core';
import { TokenStorageService } from '../../../services/token-storage.service';

@Component({
 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
 currentUser: any;
 constructor(private token: TokenStorageService) { }

 ngOnInit(): void {
   this.currentUser = this.token.getUser();
   console.log(this.currentUser = this.token.getUser())
  }

}

我该如何使用请帮助我

此图片为 {{ currentUser|json}} {{ currentUser|json}}

Answer 1

在 TokenStorageService 中更改 getUser() 方法。

   public getUser(): any {
      return JSON.parse(window.sessionStorage.getItem(USER_KEY));
   }

在 HTML 中，您正在打印 {{ currentUser }} 这将是一个对象。您需要指定对象的属性。

注意：如果要查看 html 中的对象，请使用 json 管道。 ({{ currentUser | json }})

Answer 2

如果我能在你的附加图片中正确看到它，它是一个数组而不是对象，所以你需要像 currentUser[0] 一样使用它，自己检查请使用

{{ 当前用户 | json}}在HTML中会显示准确的内容。

Answer 3

您好，我已经使用您提供的源代码创建了一个类似的应用程序 stackblitz link here。我做了一些修改来模拟登录场景。

您应该能够在数据初始加载时看到数据。由于组件是第一次初始化。但是，当您使用更改用户按钮更改用户时。虽然会话存储数据发生变化。您将无法看到新数据。为了看到这些动态变化，你需要使用 Observables/Subjects.

编辑 1：这里的问题是存储在本地存储中的键和值存储为字符串。因此，在存储时我们必须在提取时执行 JSON.Stringify() 和 JSON.Parse() 。这个有详细解释here.

angular 无法从会话存储中获取用户数据

angular can not get user data form sessionstorage

javascript

session-storage

local-storage

typescript

angular