[DÚVIDA] Autenticação com JWT e React --> Dúvidas interessantes para vocês que saibam a resposta

Fiz um CRUD + lógica de autenticação com JWT e mongoDB para um sistema de login. Minha dúvida pairá sob as rotas privadas. Fiz uma middleware para válidar se o token que o usuário envia pelo header é válido. Mas esse processo, o faço no Postman/insomnia. Minha dúvida é: como faço para o cliente que logou no meu sistema, envie o bearer token no header da requisição dele ?

!Observação: para cada rota privada coloquei uma middleware que autentica o token gerado pelo JWT, para assim, o controller fazer sua função no contexto da rota. ->Essa estratégia é uma boa prática ? !Observação 2: Após fazer a verificação do token, desestruturo o id, que vem do token verificado, e o seto no header para que facilite o resgate dos dados do usuário logado ->Essa estratégia é seguro de se fazer?

Armazeno o token como cookies, ou um localstorage da vida, para conseguir pegar o token pelo front e enviar na requisição para a API?

CarlosZiegler há 2 anos

na autenticacao voce pode seta o token no cookie na esponse do middleware. Aqui um exemplo: https://reacthustle.com/blog/next-js-set-cookie-server-side

vitoramaral10 há 2 anos

Pelo postman tem duas opções:

1- Em Headers coloca {Authorization: "Bearer token_utilizado"} 2- Em Authorization, selecione Bearer e coloque o token no campo ao lado

Por requisição depende da linguagem que está utilizando, mas basicamente é colocar um json assim

{"Authorization": "Bearer token_utilizado"}

Para te ajudar melhor poderia falar qual a linguagem você está utilizando?

dopplerpng há 2 anos

Sim! O meu problema é enviar esse token através do front-end. Estou utilizando ExpressJs

vitoramaral10 há 2 anos

bom, vou presumir que você está fazendo o frontend com o expressjs, recomendo utilizar o axios para requisição na api, la tem como definir o header

andremalveira há 2 anos

Boa noite, você está usando React no frontend certo?

Vou te passar mais ou menos a lógica de como eu particularmente costumo fazer em meus projetos React.

Requisitos

Axios

Ao realizar o login, você deve salvar o token no cookies ou localstorage, de preferência o cookie.

API Service

Crio um diretório src/services/api ou services/api e lá crio um arquivo api.ts ou api.js, nesse aquivo eu crio uma constante chamada api que vai ser igual a instância axios.

 import axios from 'axios' 
 
 const api = axios.create({
  baseURL: 'http://localhost:8000',
 });
 
 // interceptor config
 
 export default api

E dessa constante configuro um interceptor do próprio axios, você pode ver como criar aqui, abaixo é um exemplo do interceptor da request

  api.interceptors.request.use(function (config) {
    // Aqui você pode obter o token salvo do localstorage ou cookie e passar pro header `Authorization`
    
    const token = localStorage.getItem('token')
    if(token) {
       config.header['Authorization'] = token 
    } 
    
    return config;
  }, function (error) {
    // Faz alguma coisa com o erro da requisição
    return Promise.reject(error);
  });

E então criando essa configuração, você vai importar e usar a api onde for preciso, claro que nao é só isso, você pode fazer outras configurações e tratar melhor as verificações do token e erros, mas usando a api o token já vai ser passado pro header em todas as requisiçoes.

   import api from 'services/api' 
   
   api.post('/list').then((res) => {
     console.log(res)
   }).catch()

André Malveira 👍