angular - 标题组件在刷新时丢失状态

Question

当用户登录时，他们的名字会显示在导航栏中。但是，当用户刷新页面时，他们的名字就会消失。

我尝试将 isLoginNameSubject 从主题更改为 ReplaySubject 和 BehaviorSubject。

Authservice：当用户提交表单时调用 login()，这会产生两个副作用，将令牌存储在 LocalStorage 中，使用响应的子集填充导航栏（标题）。

export class AuthenticationService {
  private uri: string;
  public isLoginNameSubject =  new BehaviorSubject<Object>('test');


  constructor(
    private http: HttpClient,
    private config: Configuration,
    private router: Router ) {
    this.uri = this.config.getConfigOption('apiUri');
  }

   public login = (email: string, password: string) => {
    return this.http.post(
      `${this.uri}/authenticate?login=${email}&password=${password}`,
      undefined
    ).pipe(
      tap(res => localStorage.setItem('token', JSON.stringify(res))),
      tap(res => this.isLoginNameSubject.next(res.user.data)))
  }

  public loginName():  Observable<object> {
   return this.isLoginNameSubject.asObservable().pipe(share())
  } 

Header TS：我注入 loginName() 来隐藏 Subject 的实现。

export class HeaderComponent implements OnInit {
  public userName$: Observable<object>


  constructor(
    private authService: AuthenticationService,
    private config: Configuration) {
  }

  ngOnInit() {

    this.userName$ = this.authService.loginName()
  }

}

标题模板：

<strong *ngIf="userName$ | async as user">
              {{user.name}} 
            </strong>

当用户登录时，用户会被带到一个欢迎页面。导航栏/标题内容由 res.user.data 中的内容填充，特别是用户名。当用户刷新页面时，我希望用户名继续显示。事实上，事实并非如此。似乎 res.user.data 在刷新时丢失了。

最初我推断这是因为 isLoginNameSubject 只是一个主题。刷新页面时重新加载，但没有登录事件。我尝试使用 isLoginNameSubject 作为 BehaviorSubject，因为我知道它会发出最后一个值，但问题仍然存在。

标签： angularauthenticationrxjs