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