Executando verificação de segurança...
1

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 👍

Carregando publicação patrocinada...