Búsqueda de sitios web

javascript - Pasar datos con un método asincrónico de un servicio a un componente en Angular


Estoy trabajando en un método de inicio de sesión en mi servicio que pasa datos a los componentes cuando el usuario inicia sesión en la aplicación. Este método de inicio de sesión realiza una solicitud HTTP y, en caso de éxito, llama al método setAuthentication para actualizar las propiedades que quiero compartir.

Pero cuando quiero usar estas propiedades en un componente, por ejemplo, una página de panel con el nombre del usuario, usando

  public currentUser = this.authService.currentUser

No estoy obteniendo los valores actualizados de las propiedades, solo null.

Este es mi código de servicio:

  public currentUserAuth:User | null =  null
  public currentUser:User | null =  null
  public currentState:authStatus = authStatus.Cheking
  

  public loginUser(loginInterface: loginInterface){
    const url = `${this.basicURL}/login`
    const body = {email: loginInterface.email, password1: loginInterface.password1}
    return this.http.post<loginResponse>(url, body)
    .pipe
    (map(({user, token, currentUser}) => this.setAuthentication(user, token, currentUser!)),
    catchError(err => throwError(() => err.error.message))
    )
  }

  public setAuthentication(userPayload:User, token:string, currentUser: User){
    this.currentUserAuth = userPayload
    this.currentState = authStatus.Authenticated
    this.currentUser = currentUser
    localStorage.setItem('token', token)
    
    return true
  }

Agradezco cualquier ayuda

Respuesta #1

Por favor, cambie currentUser a un método getter en su lugar

public get currentUser(): any {
    return this.authService.currentUser;
}

Si no te gusta usar métodos getter, entonces necesitas establecer la propiedad de currentUser solo después de que el valor se haya establecido en el servicio; abajo estoy asumiendo que currentUser en el servicio se establece antes de que ngOnInit se ejecute.

public currentUser;

ngOnInit(): void {
    this.currentUser = this.authService.currentUser;
}