Como enviar Token Bearer com Axios

O uso de tokens de autenticação é uma prática comum na autenticação de API em aplicativos da web. O token Bearer (ou token de portador) é um tipo de token que é frequentemente utilizado para autenticar solicitações HTTP em API protegidas. Se você está trabalhando com o Axios, uma popular biblioteca JavaScript para fazer solicitações HTTP, você pode aprender a enviar um token Bearer de forma eficaz.

Mas antes de mais nada vamos entender o que é um Token Bearer.

O que é um Token Bearer?

Um token Bearer é um tipo de token de autenticação que é incluído no cabeçalho de uma solicitação HTTP para autenticar o usuário. Ele é chamado de “Bearer” porque o cliente (ou seja, quem faz a solicitação) “porta” o token, ou seja, ele o envia no cabeçalho da solicitação para provar sua identidade.

Sem mais delongas vamos ao passo a passo.

Passo a passo: Enviando um Token Bearer com Axios

Vamos dar uma olhada em como você pode enviar um Token Bearer com Axios em seu aplicativo:

Passo 1: Obtenha o Token Bearer

O primeiro passo é obter o Token Bearer, que geralmente é gerado pelo servidor após o processo de autenticação do usuário.

O Token Bearer é um tipo de autenticação baseado em token, onde um token de acesso é gerado e enviado pelo servidor ao cliente para que ele possa ser usado nas próximas requisições.

Passo 2: Configurar o Axios

Agora que já temos o token armazenado é preciso configurar o Axios par incluir o Token em todas as suas requisições.

Isso geralmente é feito definindo um cabeçalho comum para todas as solicitações

Para isso, você pode definir o header “Authorization” para o valor “Bearer <seu-token-aqui>” em todas as requisições.

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://sua-api.com',
  headers: {
    'Authorization': `Bearer ${seuTokenAqui}`
  }
});

export default api;

Lembre-se de substituir 'https://sua-api.com' pelo URL da sua API e 'seuTokenBearer' pelo seu token real.

Passo 3: Usando o Axios com o Token Bearer

Com o Axios já configurado para incluir o Token em todas suas requisições, você pode usá-lo para enviar requisições HTTP para a API protegida.

Por exemplo, se você quiser fazer uma requisição GET para uma rota protegida, você pode usar o seguinte código:

import api from './api';

async function getData() {
  try {
    const response = await api.get('/rota-protegida');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

getData();

Ao fazer essa requisição, o Axios incluirá automaticamente o Token Bearer no header “Authorization”, permitindo que o servidor autentique a requisição e retorne a resposta desejada.

Vale ressaltar que acima foi só um exemplo de chamada, o mesmo vai funcionar para todos os métodos HTPP (GET, POST, PUT, DELETE, etc.).

Conclusão

Enviar um Token Bearer com Axios é uma prática essencial ao trabalhar com APIs protegidas por autenticação. Certifique-se de armazenar seu token com segurança e substituí-lo quando necessário. Isso garante que apenas usuários autorizados tenham acesso aos recursos protegidos de sua API.

Espero que este guia tenha sido útil para você aprender a enviar um Token Bearer em suas solicitações Axios.

Lembre-se de adaptar o código às necessidades específicas de sua aplicação e garantir a segurança de seus tokens de autenticação.

Quer mais posts sobre JavaScript confira aqui.

Agora se quiser mais informações sobre o Axios confira na documentação oficial da biblioteca.