Question

在我的Dasboard Component中，我需要给username并将其发送获取用户详细信息的表单服务器，例如fName , lName , Image , . . .

我以这种方式传递username：

用户登录后，我从username获取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;
})

现在，问题在于，当浏览器刷新时，用户名将为null，我需要再次登录。

出什么问题了？我该如何解决这个问题？

Answer 1

页面刷新时，将清除“ usenameSource”值。要保留它，请在服务构造函数中再次调用方法“ getUserNameDecode（）”。

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);
}

....

Answer 2

我假设启动应用程序时将首先加载登录组件。
而且，我还假设用户成功登录后就将用户名详细信息存储在本地存储中。
因此，我们必须首先检查本地存储中的用户名，然后再执行下一步操作。

登录组件

ngOnInit() {
  const status = this.checkUserNameInLocalStorage();
  if (status) {
    this.userName = JSON.parse(window.localStorage['userName']);
  } else {
    // write your logic to get the userName details
  }
}

checkUserNameInLocalStorage() {
  if (window.localStorage['userName']) {
    return true;
  } else {
    return false;
  }
}

希望这会对您有所帮助。

在angular6中刷新页面时，用户名将为null

2 个答案:

登录组件