2

Necesito poder mostrar el nombre del usuario loggeado, estoy siguiendo un tutorial y no consigo aplicar la última parte que dice lo siguiente:

userLogged es una variable de tipo User (hace falta importar el modelo de User) que inicializo en el ngOnInit() del componente llamando al método getUserLoggedIn() del servicio de user (importado mediante inyección de dependencias). https://codingpotions.com/angular-login-sesion/

Ahí les dejé también el link al tuorial, les dejo también los fragmentos de mi código tal y como está ahora, con todos los imports y todo.

Login.component.ts

import { Component, OnInit } from '@angular/core';
import { LoginService } from '../../services/login.service';
import { Router } from '@angular/router';
import { User } from '../../models/user';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(
    private loginService: LoginService,
    private router: Router,
    private userService: UserService
    ) { }

    ngOnInit() {
    }

  logIn(username: string, password: string, event: Event) {
    event.preventDefault(); // Avoid default action for the submit button of the login form

    // Calls service to login user to the api rest
    this.loginService.logIn(username, password).subscribe(

      res => {
        let u: User = {username: username};        
        this.userService.setUserLoggedIn(u);

      },
      error => {
        console.error(error);

      },
      () => this.navigate()
    );

  }

  navigate() {    
    this.router.navigateByUrl('/home');
  }
}

Login.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/';

@Injectable({
  providedIn: 'root'
})
export class LoginService {

  constructor(private http: HttpClient) {
  }

  logIn(username:string, password:string) {
    return this.http.post('https://reqres.in/api/login', {
      email: username,
      password: password,     
    });     
  }
}

Y finalmente mi user.service.ts

import { Injectable } from '@angular/core';
import { User } from '../models/user';

@Injectable()
export class UserService {

  private isUserLoggedIn;
  public usserLogged:User;

  constructor() { 
    this.isUserLoggedIn = false;
  }

  setUserLoggedIn(user:User) {
    this.isUserLoggedIn = true;
    this.usserLogged = user;
    localStorage.setItem('currentUser', JSON.stringify(user));

  }

  getUserLoggedIn() {
    return JSON.parse(localStorage.getItem('currentUser'));
  }

}

A ver si alguien pudiese echarme una mano, cuando hago el login si los datos son correctos me lleva el home si los datos no son correctos no pasa por lo que yo deduzco que está funcionando correctamente todo lo anterior al tutorial.

Muchísimas gracias a todos!

EDITO Añado mi home.component.ts y mi home.component.html

home.component.ts

import { Component, OnInit } from '@angular/core';
import { Citas } from '../../models/citas';
import { CitasService } from '../../services/citas.service'; 
import { trigger, style, animate, transition } from '@angular/animations';
import { LoginService } from '../../services/login.service';
import { Router } from '@angular/router';
import { User } from '../../models/user';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-home',
  providers: [LoginService],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({transform: 'translateX(100%)', opacity: 0}),
          animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateX(0)', opacity: 1}),
          animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
        ])
      ]
    )
  ],
})
export class HomeComponent implements OnInit {
    public fecha = new Date();
  public hora = this.fecha.getHours();
  public today = Date.now();
  public citas:Citas;
  constructor(
    private _citasService:CitasService,
    private _service:LoginService
  ) { }

  ngOnInit() {
    this.getCitasHome();
  }

  getCitasHome() {
    console.log('Citas cargadas correctamente');
    this._citasService.getCitasHome().subscribe(
        result => {
          if(result['code'] != 200) {
          } else {
            this.citas = result["data"];
          }
        },

        error => {
          console.log(<any>error);
        }
      );
}
}

home.component.html

<div *ngIf="usserLogged">
  {{userLogged.username}}
</div>
9
  • 1
    Puedes pintar por consola el user que llega a la función setUserLoggedIn y ver si el login te devuelve el user o solamente un Ok. Aún asi cual es tu problema?
    – lDanny7
    el 5 jul. 2019 a las 7:04
  • Que no muestra nada el 5 jul. 2019 a las 7:12
  • Nos puedes mostrar el componente Home? Pon un console antes de guardar en el localstorage para ver que esta guardando
    – lDanny7
    el 5 jul. 2019 a las 7:14
  • El usserlogged lo estoy mostrando en el login.component.html para probar el 5 jul. 2019 a las 8:16
  • 1
    Comparte el codigo html de Login el 10 jul. 2019 a las 19:00

2 respuestas 2

2
+50

Si vas a mostrar en el Home en el metodo OnInit()

export class HomeComponent implements OnInit {
 public fecha = new Date();
 public hora = this.fecha.getHours();
 public today = Date.now();
 public citas:Citas;

 usserLogged:User;

 constructor(
  private _citasService:CitasService,
  private _service:LoginService
 ) { }

 ngOnInit() {
   usserLogged= this._service.getUserLoggedIn();
 }

 ...

y en el html

<div *ngIf="usserLogged">
      {{userLogged.username}}
   </div>

1
0

Puede que el fallo resida en que estas accediendo a una variable que no existe en el componente home, si no que existe en el servicio el cual inyectas en este componente. Prueba de la siguiente manera a ver.

<div *ngIf="_service.usserLogged">
   {{_service.userLogged.username}}
</div>
1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.