1
resposta

Problemas com o ngIf, BehaviorSubject e jwt_decode

Olá pessoal, boa tarde! Acumulei 3 problemas para postar de uma só vez kkk

O primeiro é que no meu header não exibe a mensagem 'Please, login!' quando o usuário não está logado. Quando logado, tudo ok!

<header class="fixed-top">
    <nav class="navbar navbar-light bg-white">
        <a class="navbar-brand">SERMIL TESTE</a>
        <div *ngIf= "(user$ | async) as user; else login"> 
            <i class="fa fa-user-circle"></i>
            <a class= "username"> {{user.name}}</a>
        </div>

        <ng-template #login>
            <span class="navbar-text">
                Please, login!
            </span>
        </ng-template>

    </nav>
</header>

Esse é o meu user.service.ts, que por sinal estão 2 dos problemas. Primeiro que o BehaviorSubject não aceita valor (null) e segundo que a const 'token' não é aceita no jwt_decode sem o uso do any:

import { TokenService } from './../login/login/token/token.service';
import { Injectable } from "@angular/core";
import { BehaviorSubject } from 'rxjs';
import { User } from './user';
import jwt_decode from "jwt-decode";

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

    private userSubject = new BehaviorSubject<User>({id:null, name:null, email:null, profile:null});

    constructor (
        private tokenService: TokenService) 
        {
            this.tokenService.hasToken() && 
                this.decodeAndNotiFy();
        }

    setToken(token: string){
        this.tokenService.setToken(token);
        this.decodeAndNotiFy();

    }

    getUser (){
        return this.userSubject.asObservable();
    }

    private decodeAndNotiFy(){
        const token: any = this.tokenService.getToken();
        const user = jwt_decode(token) as User;
        this.userSubject.next(user);
    }
}

Esse foi o erro para o jwt_decode(token) as User:

const token: string | null
Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.ts(2345)

Esse foi a maneira como meu token foi recuperado:

loginUser(): void {
    this.serviceService.loggingIn(this.service).subscribe(data => {
      this.serviceService.showMessage('Usuário autenticado!')
      const authToken = JSON.parse(JSON.stringify(data)).token
      console.info(authToken)
      this.userService.setToken(authToken)
  }, error =>  {
    this.service.password = ''
    if (error.status == 400){
      this.serviceService.showMessage(error.error[0].error)
    }
  })  
  }

  logout(): void {
    localStorage.clear();
    this.router.navigate(['']);
  }
}

O código não é o mesmo do apresentado no curso pq meu projeto já estava um pouco adiantado. O problema principal tá no header.component.html que não mostra a mensagem de ' Please, login!'

Grato desde já!

1 resposta

Fala ai Gabriel, tudo bem? Falando apenas vendos os códigos é complicado, posso deixar passar pequenos detalhes facilmente, sendo assim, vou lhe pedir um favor:

Compartilha o projeto completo comigo, assim eu consigo simular os problemas por aqui e analisá-los com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Espero ter ajudado.