1

Buenas tardes en el día de hoy me encuentro haciendo una autenticación de un usuario y aquí tengo un problema y es que al hacer clic en login o logout no me está cambiando la etiqueta o link a login o logout.Me toca hacer doble clic para qué cambie y otro click mas para que ejecute la accion y quiero que esto no pase, como puedo arreglar esto?.

En la parte del codigo se encuentra el componente y html del login, en el header lo mismo y el authenticacion services los metodos que se usan para hacer autenticaciones y verificaciones. Si alguien me podria ayudar en resolver esto estaria agredecido

este es mi componente header

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthenticationService } from 'src/app/services/authentication.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
  isLoggedIn = false;

  constructor(
    private authenthication: AuthenticationService,
    private router: Router
  ) {}

  ngOnInit(): void {}

  verifyLooged() {
    if (this.authenthication.verifyLooged()) {
      this.router.navigateByUrl('home');
      this.isLoggedIn = true;
    }
  }

  onLogout() {
    this.authenthication.logout();
    this.isLoggedIn = false;
  }
}

este es mi html del header

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" routerLink="/">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" routerLink="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/signup">Singup</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" *ngIf="!isLoggedIn" (click)="verifyLooged()" routerLink="/login">Login</a>
                    <a class="nav-link" *ngIf="isLoggedIn" (click)="onLogout()">LogOut</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

authenticacion services

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, map, Observable } from 'rxjs';
import { ConfigurationService } from './configuration.service';
import { Router } from '@angular/router';
import { HeaderComponent } from '../shared/components/header/header.component';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',
    Accept: '*/*',
  }),
};

@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {
  private URL_BASE: string;

  constructor(
    private configuration: ConfigurationService,
    private http: HttpClient,
    private router: Router,
  ) {
    this.URL_BASE = this.configuration.getUrlBase();
  }

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
    }),
  };

  singup(data: any) {
    return this.http.post(this.URL_BASE + 'signup', data);
  }

  login(email: string, password: string): Observable<> {
    const user: any = {
      email: email,
      password: password,
    };
    return this.http
      .post<>(
        this.URL_BASE + 'login',
        JSON.stringify(user),
        this.httpOptions
      )
      .pipe(
        map((res: any) => {
          this.authSuccess(res.access_token);
          return res;
        })
      );
  }

  authSuccess(token: string) {
    localStorage.setItem('token', token);
  }

  getToken(): string | null {
    return localStorage.getItem("token");
  }

  logout() {
    localStorage.removeItem("token");
    this.router.navigate(["login"]);
  }

  verifyLooged(): boolean{
    const token = localStorage.getItem("token")
    //return token ? true : false;
    return !!token;
  }
}

componente login

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthenticationService } from 'src/app/services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent implements OnInit {
  mensaje!: string;
  form: any = {
    email: null,
    password: null,
  };
  //isLoggedIn = false;
  isLoginFailed = false;

  constructor(
    private authenthication: AuthenticationService,
    private router: Router
  ) {}

  ngOnInit(): void {
    // if (this.authenthication.verifyLooged()) {
    //   //this.isLoggedIn = true;
    //   this.router.navigateByUrl('home');
    // }
  }

  submit(): void {
    const { email, password } = this.form;

    this.authenthication.login(email, password).subscribe({
      next: (data) => {
        //console.log(data);
        this.mensaje = 'Datos Correctos';
        this.router.navigateByUrl('home');
      },
      error: (err) => {
        console.log(err.error.message);
        this.isLoginFailed = true;
        this.mensaje = 'Datos Incorrectos';
      },
    });
  }
}

html del login

<form name="form" (ngSubmit)="f.form.valid && submit()" #f="ngForm" novalidate>
    <div class="form-group">
        <label for="inputEmail" class="form-label">Email address</label>
        <input type="email" class="form-control" name="email" id="email" autocomplete="email" required
            [(ngModel)]="form.email" #email="ngModel" aria-describedby="email">
    </div>
    <div class="form-group">
        <label for="inputPassword" class="form-label">Password</label>
        <input id="password" name="password" type="password" autocomplete="current-password" [(ngModel)]="form.password"
            minlength="8" #password="ngModel" class="form-control" required>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

<div *ngIf="mensaje">{{mensaje}}</div>

esto pasa cuando me autentico

introducir la descripción de la imagen aquí

se puede observar que no cambia la etiqueta login, pero si le doy click de nuevo cambia, y si le vuelvo dar click me desloguea

introducir la descripción de la imagen aquí

1 respuesta 1

0

Creo hay una mala detección del cambio de estado por eso no está cambiando la etiqueta o link a login cuando así debería ser. Para detección del cambio de estado de autenticación del usuario

podes usar BehaviorSubject teoria definido en el servicio como

isLoginSubject este es un Observable y un Observer tendrá un valor booleano inicial de acuerdo a si existe en el LocalStorage el token mediante hasToken() en el servicio retornamos su parte Observable

mediante isLoggedIn Detectamos el cambio de estado en el header el async pipe lo utilizamos en la vista para subscribimos

// services
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, map, Observable } from 'rxjs';
import { ConfigurationService } from './configuration.service';
import { Router } from '@angular/router';
import { HeaderComponent } from '../shared/components/header/header.component';

import { BehaviorSubject, Observable } from "rxjs";

isLoginSubject = new BehaviorSubject<boolean>(this.hasToken());

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',
    Accept: '*/*',
  }),
};

@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {
  private URL_BASE: string;

  constructor(
    private configuration: ConfigurationService,
    private http: HttpClient,
    private router: Router,
  ) {
    this.URL_BASE = this.configuration.getUrlBase();
  }

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
    }),
  };
  
  
  private hasToken() : boolean {
    return !!localStorage.getItem('token');
  }

  singup(data: any) {
    return this.http.post(this.URL_BASE + 'signup', data);
  }

  login(email: string, password: string): Observable<Presocloud> {
    const user: any = {
      email: email,
      password: password,
    };
    return this.http
      .post<Presocloud>(
        this.URL_BASE + 'login',
        JSON.stringify(user),
        this.httpOptions
      )
      .pipe(
        map((res: any) => {
          this.authSuccess(res.access_token);
          return res;
        })
      );
  }
  
  isLoggedIn() : Observable<boolean> {
 return this.isLoginSubject.asObservable();
}

  authSuccess(token: string) {
    localStorage.setItem('token', token);
     this.isLoginSubject.next(true);
  }

  getToken(): string | null {
    return localStorage.getItem("token");
  }

  logout() {
    localStorage.removeItem("token");
    this.isLoginSubject.next(false);
    this.router.navigate(["login"]);
  }

  
}
//header
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthenticationService } from 'src/app/services/authentication.service';
import { Observable } from "rxjs";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
   isLoggedIn : Observable<boolean>;

  constructor(
    private authenthication: AuthenticationService,
    private router: Router
  ) { this.isLoggedIn = authService.isLoggedIn();}

  ngOnInit(): void {}

  verifyLooged() {
this.isLoggedInO.subscribe(bole=>{if(bole ==true) this.router.navigateByUrl('home'); })

} }

  onLogout() {
    this.authenthication.logout();
    
  }
}
 // html header
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" routerLink="/">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" routerLink="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/signup">Singup</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"  *ngIf="!(isLoggedIn | async)" (click)="verifyLooged()" routerLink="/login">Login</a>
                    <a class="nav-link" *ngIf="(isLoggedIn | async)" (click)="onLogout()">LogOut</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Como el formulario sera de un usuario prefiero

usuario: any = {
    email: null,
    password: null,
  };

tambien en el evento submit enviar al formulario

onSubmit(form:any): void {....}

Con las modificaciones y teniendo en cuenta este tipo de errores para acceder a valores requeridos Property 'required' comes from an index signature, so it must be accessed with ['required'].

<form (ngSubmit)="f.form.valid && onSubmit(f)" #f="ngForm" novalidate>
    <div class="form-group">
        <label for="inputEmail" class="form-label">Email address</label>
        <input type="email" class="form-control" name="email" id="email" [(ngModel)]="usuario.email" #email="ngModel"
            [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" email required>

        <div *ngIf="f.submitted &&  email.invalid " class="invalid-feedback">
            <div *ngIf="email.errors?.['required']">Email is required</div>
            <div *ngIf="email.errors?.['email']">Must be a valid email address</div>
        </div>
    </div>

    <div class="form-group">
        <label for="inputPassword" class="form-label">Password</label>
        <input id="password" name="password" type="password" #password="ngModel" class="form-control"
            [(ngModel)]="usuario.password" [ngClass]="{ 'is-invalid': f.submitted && password.invalid }" minlength="8"
            required>
        <div *ngIf="f.submitted && password.invalid" class="invalid-feedback">
            <div *ngIf="password.errors?.['required']">Password is required</div>
            <div *ngIf="password.errors?.['minlength']">Password should be at least 8 characters long</div>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>


usuario: any = {
    email: null,
    password: null,
  };
  constructor() { }

  ngOnInit(): void {
  }
  onSubmit(form:any): void {
    const { email, password } = this.usuario;
    console.log(email);
    console.log(password);
    console.log('Form value',form.value);
  }
13
  • Tengo un error es en la parte de verifyLooged para ser especificos esta parte: this.isLoginSubject.next(true); :this.isLoginSubject.next(false); me dice "Unreachable Code Detected" Commented el 1 jul. 2022 a las 19:45
  • si no lo vi porque en realidad no me parece que se requiera () de esa forma . Lo llamas desde Head y como el Observable isLoggedIn tiene un valor booleano lo podes comparar dentro del metodo verifyLooged el valor te lo envía el metodo isLoggedIn(), lo edito
    – nestdan
    Commented el 1 jul. 2022 a las 23:07
  • cualquier cosa decime si no te funciona la edicion
    – nestdan
    Commented el 1 jul. 2022 a las 23:09
  • Ya me funciono muchisimas gracias :), lo unico que me toco modificar fue en verifyLooged() { en el header component fue quitar this.router.navigateByUrl('home'); ya que no me dejaba entrar al login. Commented el 1 jul. 2022 a las 23:28
  • Con este login tengo otro problema y es que le estoy intentando agregar validaciones de los inputs email y password de este formulario, pero no sé cómo hacerlo, ya que si agrego [class]="isValidField('email')" y formControlName="email" me aparecen errores, no sé si de pronto puedas revisarlo y aconsejarme que hacer, he revisado muchos videos, pero no me sirven me aparecen muchos errores. Este es link: es.stackoverflow.com/questions/544106/… Estaria muy agradecido si me ayudaras, muchas gracias :) Commented el 1 jul. 2022 a las 23:32

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.