TOKEN NULL

Olá, Roberto! Tudo bem?

Desculpa pela demora!

Você consegue compartilhar o trecho do código em que você tenta acessar o token (e retorna null)?

Aguardo!

authenticate(userName:string , password: string){
    return this.http.post( 
        API_URL + '/user/login',{ userName , password },{ observe: 'response' }
      ).pipe(tap( response => {
          const authToken = response.headers.get('x-access-token');
          console.log(authToken);
        }) 
      )
  }

Obrigado, Roberto!

Aparentemente seu código está correto mesmo. Por acaso você está usando a API disponibilizada pelo instrutor no curso ou outra?

Se puder compartilhar o projeto inteiro aqui (pelo GitHub ou o .zip mesmo), nós podemos olhar melhor o código e ver se o problema vem de algum outro lugar!

sim , estou usando a API disponibilizada no curso.

nao permitiu mandar o zip

Desculpe, mas ocorreu um problema ao inserir as imagens
    O arquivo "alurapic.zip" não é permitido, apenas imagens!

LINK GITHUB

https://github.com/robertoalam/angular-alurapic.git

Olá, Roberto!

Testei seu projeto aqui, e o console.log apresentou o authToken. A única alteração que eu fiz foi mudar o endereço da API para http://localhost:3000, pois vi que o seu era o IP, mas se na aba Network o X-Access-Token aparecia corretamente no Header, isso não deve estar causando problemas.

Mas até essa aula do curso, o token não é guardado, e portanto é inacessível. É nas linhas 22 e 24 do auth.service.ts que o token está retornando NULL mesmo? É essa parte que eu estou testando.

[1] os meus projetos ficam em outra maquina, por isso não rodam localhost. [2] o problema é entre essas linhas mesmo, 22 e 24

Oi Roberto, tudo bem? Vc consegue mandar aqui a mensagem de erro que está aparecendo pra vc? Onde é que ele está apontando o Null?

    return this.http.post( 
        API_URL + '/user/login',{ userName , password },{ observe: 'response' }
      ).pipe(tap( response => {
          console.log('RETORNO')
          console.log(response)
          const authToken = response.headers.get('x-access-token');
          console.log('TOKEN: ',authToken)
        }) 
      )

Olá, Roberto! Tudo bem?

Desculpa a demora, precisei solicitar ajuda de outros e também dar uma pesquisada sobre. O que eu descobri foi o seguinte:

• O que aparece na aba Network não reflete o que a aplicação tem acesso. Isso ocorre porque é responsabilidade do back-end definir a quais chaves personalizadas do Header o JavaScript de uma página pode acessar.

Isso explica o porque de você conseguir visualizar o x-access-token na aba Network, mas ela não existir na aplicação. Para você ter acesso a ele, é preciso que seja liberado no back-end, mas isso nos leva ao segundo ponto:

• De fato , o x-access-token é configurado para ser exposto ao front-end, o instrutor fez isso na API.

É por isso que eu e outros alunos conseguimos acessar o x-access-token sem problemas, o que não explica o motivo de você não conseguir fazer o mesmo.

Infelizmente, apenas tenho uma teoria sobre o que possa estar acontecendo: acredito que mesmo que exposto, como você está fazendo o acesso por um IP diferente, e essa requisição ocorre em um canal HTTP, alguma configuração do navegador ou da biblioteca usada na API (cors), limite o acesso.

Você pode ler um pouco mais sobre o CORS aqui.

Minha recomendação é que você tente rodar o front-end e o back-end na mesma máquina, e verificar se funciona. Mas infelizmente não encontrei uma solução para o problema mantendo o acesso do jeito que você está fazendo.

Novamente, desculpa pela demora e bons estudos!

Olá Leonardo , tudo ótimo aqui . compreendido a essência , realmente eu nao rodo via LOCALHOST .

Brigado pela explicação