Dois Erros no Método Autenticar

Não resolvi ainda

Olá Jean, tudo bem?

Conferi seu código com o da aula e não encontrei erros. Então, pode ser algum problema com importações ou mudanças entre as versões. Vi que você está usando a 14 e o curso foi desenvolvido com a versão 11.

Me envia por favor, o código completo (pode ser print da tela) dos arquivos autenticacao.service.ts, token.service.ts e usuario.service.ts.

Autenticacao Service

import { environment } from './../../environments/environment.prod';
import { UsuarioService } from './usuario/usuario.service';
import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

const API = environment.apiURL;

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

  constructor(
    private httpClient: HttpClient,
    private usuarioService: UsuarioService
  ) {

  }

  autenticar(usuario: string, senha: string): Observable<HttpResponse<any>>  {
    return this.httpClient.post(
      `${API}/user/login`,[
      {
        userName: usuario,
        password: senha
      },
      {observe: 'reponse'} ]
    ).pipe(
      tap( (res) => {
        const authToken = res.headers.get('x-access-token') ?? '';
        this.usuarioService.salvaToken(authToken);
      })
    );
  }



}

Token Service

import { Injectable } from '@angular/core';


const KEY = 'token';

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

  returnToken(){
    return localStorage.getItem(KEY) ?? '';
  }

  salvaToken(token: string) {
    localStorage.setItem(KEY, token);
  }

  excluiToken() {
    localStorage.removeItem(KEY);
  }

  possuiToken() {
    return !!this.returnToken();
  }

}

Usuario Service

import { Usuario } from './usuario';
import { TokenService } from './../token.service';
import { Injectable } from '@angular/core';
import  jwt_decode from 'jwt-decode';
import { BehaviorSubject } from 'rxjs';

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

  private usuarioSubject = new BehaviorSubject<Usuario>({});

  constructor(private tokenService: TokenService) {
    if(this.tokenService.possuiToken()){
      this.decodificaJWT();
    }
   }

  decodificaJWT() {
    const token = this.tokenService.returnToken();
    const usuario = jwt_decode(token) as Usuario;
    this.usuarioSubject.next(usuario)
  }

  retornaUsuario() {
    return this.usuarioSubject.asObservable();
  }

  salvaToken(token: string) {
    this.tokenService.salvaToken(token);
    this.decodificaJWT();
  }

  logout() {
    this.tokenService.excluiToken();
    this.usuarioSubject.next({});
  }

  estaLogado() {
    return this.tokenService.possuiToken;
  }

}

Olá Jean, conferi os arquivos token.service e o usuario.service e não encontrei problemas.

No arquivo autenticacao.service.ts, vi que você está usando uma constante API, importando de environment.prod.ts. O ambiente de desenvolvimento é o environment.ts. De qualquer forma, vou colar o que baixei do curso para você comparar:

autenticacao.service

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { UsuarioService } from './usuario/usuario.service';
import { tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class AutenticacaoService {
  constructor(
    private httpClient: HttpClient,
    private usuarioService: UsuarioService
  ) {}

  autenticar(usuario: string, senha: string): Observable<HttpResponse<any>> {
    return this.httpClient
      .post(
        'http://localhost:3000/user/login',
        {
          userName: usuario,
          password: senha,
        },
        { observe: 'response' }
      )
      .pipe(
        tap((res) => {
          const authToken = res.headers.get('x-access-token') ?? '';
          this.usuarioService.salvaToken(authToken);
        })
      );
  }
}

Obrigado Nayanne! Vi que tinha digitado { observe: 'reponse' } e o certo seria { observe: 'response' }, foi um dos erros que cometi.