Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

11
respostas

TOKEN NULL

nao consigo ir adiante no curso porque o token retorna NULL, mas indo no console/network o token está la!

HTTP/1.1 200 OK

X-Powered-By: Express

Access-Control-Allow-Origin: *

x-access-token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibmFtZSI6ImZsYXZpbyIsImVtYWlsIjoiZmxhdmlvQGFsdXJhcGljLmNvbS5iciIsImlhdCI6MTYzNjExMzYxMCwiZXhwIjoxNjM2MjAwMDEwfQ.5kWgz8_2gkwBwHak29Xkayyz--48QJ36AQp39AQZucU

Content-Type: application/json; charset=utf-8

Content-Length: 57

ETag: W/"39-+mUwkYhQ3j4xqMGN1iwdhz9Aymg"Date: Fri, 05 Nov 2021 12:00:10 GMTConnection: keep-alive

11 respostas

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)
        }) 
      )

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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