无法读取不确定的Observables Ionic的属性方向

问题描述

我正在开发Ionic 5 /角形贴合,但无法使用注销功能

注销后,将显示登录页面,但不能使用输入用户名密码的输入(不会从键盘上输入任何内容

只有错误提示有时会显示

enter image description here

组件中的注销方法是:

     login(form){

    this.authService.login(form.value);
    
    this.authService.currentUser.subscribe(
      (data)=>{
        console.log(data);
        if(data) {this.router.navigateByUrl('home')}
          else {
            
            this.router.navigateByUrl('/login')
          }
      },(error) => {throw Error(error)}
    );
    
  }

我正在使用behaviorSubject跟踪服务中已登录用户

 private _currentUser: BehaviorSubject<UserLogueado> = new BehaviorSubject(null);

  currentUser = this._currentUser.asObservable();

  constructor(private hashingService: HashingService,private router: Router,private http: HttpClient) { }

  encriptarContrasenia(contrasenia: string): string {
    
    return this.hashingService.hashearString(contrasenia);
  }

  private setSession(authResult) {
    //const expiresAt = moment().add(authResult.expiresIn,'second');

    localStorage.setItem('auth_token',authResult.token);
    localStorage.setItem('auth_Refresh_token',authResult.refreshToken);
}  

  login(usuarioFromForm) {

    var usuario;
    var dataToken;

    this.http.post<any>(environment.UrlBaseApi +'Authenticate/Login',{ username: usuarioFromForm.email,password: this.encriptarContrasenia(usuarioFromForm.password) },{headers: new HttpHeaders({ 'Content-Type': 'application/json' })})
      .subscribe(
        data => {
          console.log(data)
          dataToken = data
          this.setSession(data)
          this.obtenerDetalleUsuario(usuarioFromForm.email).subscribe(
            data=>{
              usuario = data;
              //this._currentUser = new BehaviorSubject(usuario)
              /* this._currentUser.isstopped = false;
              this._currentUser.closed = false; */
              //this._currentUser.lift()
              this._currentUser.next(usuario);

            },(error) => {
              throw error
            }
          )
        },(error) => {
          throw error
        }
      )
  }

  getUserSubject() {
    return this._currentUser.asObservable();
  }

  isLoggedIn() {
    return !!this._currentUser.value;
  }

  obtenerDetalleUsuario(usuario: string): Observable<any>{

    return this.http.get<any>(environment.UrlBaseApi + `Authenticate/user/${usuario}`);
 
  }

  logout() {

      localStorage.removeItem('auth_token')
      localStorage.removeItem('auth_Refresh_token')
      
      this.router.navigate(['/login'])

      this._currentUser.next(null);
  }

当前用户用于在appComponent中显示手册和标题

有什么建议吗?

编辑:

尝试不同的方法后,我注意到如果我在注销方法中注释以下行:

this._currentUser.next(null);

应用程序导航到登录页面并输入工作。但是由于菜单标题取决于主题,所以会显示它们。

关于如何修复主题的任何建议?

解决方法

由于currentUser是可观察的,因此它应与AsyncPipe一起使用以便订阅并接收其内部值,如下所示:

<app-menu *ngIf="currentUser | async">
,

组件销毁后,您是否要取消订阅this.authService.currentUser

组件代码:

destroyed$ = new Subject();

this.authService.currentUser.pipe(
   takeUntil(this.destroyed$)
).subscribe(...)

ngOnDestroy() {
   this.destroyed$.next();
   this.destroyed$.complete();
}