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