javascript - 在 Angular6 中刷新页面时，用户名将为空

Question

在我的Dasboard组件中，我需要提供一个用户名并将其发送 用于获取用户详细信息的表单服务器，例如 fName 、 lName 、 Image 、 . 。 .

我用这种方式传递用户名:

当用户登录时，我从 LocalStorage 获取用户名:

登录组件:

private usenameSource = new BehaviorSubject<string>('');
userName$ = this.usenameSource.asObservable();

getDecodedAccessToken(): any {
  return jwt_decode(this.getRawAuthToken(AuthTokenType.AccessToken));
}

getUserNameDecode():any {
  const decode = this.getDecodedAccessToken();
  let userName = decode["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name"];
  return this.usenameSource.next(userName);
}

仪表板组件:

this.loginService.userName$.subscribe((data) => {
  this.userName = data;
})

现在的问题是，当浏览器刷新时，用户名将为空，我需要重新登录。

有什么问题吗？我该如何解决这个问题？

Answer 1

当页面刷新时，“usenameSource”值将被清除。要保留它，请在服务构造函数中再次调用方法“getUserName Decode()”。

constructor(...) {
    this.getUserNameDecode();
}

getUserNameDecode():any {
   const decode = this.getDecodedAccessToken();

   if(!decode) {
      // login failed
      return;
   }

   let userName = decode["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name"];
   return this.usenameSource.next(userName);
}

...