Question

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

我尝试将isLoginNameSubject从Subject更改为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())
  }

标题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仅仅是一个Subject。刷新后，页面将重新加载，但没有登录事件。我尝试将isLoginNameSubject用作BehaviorSubject，因为我知道它会发出最后一个值，但问题仍然存在。

标头组件在刷新时丢失状态

0 个答案: