Como enviar Bearer Token com o Axios

Neste artigo você aprenderá a enviar Bearer Token com o Axios, uma das formas mais comuns de fazer autenticação de APIs

Fala programador(a), beleza? Bora aprender mais sobre React JS?

Enviar um Bearer Token em suas requisições HTTP é uma prática comum para autenticar usuários em aplicações modernas.

Neste artigo, vamos discutir como você pode enviar um Bearer Token com o Axios, uma biblioteca JavaScript muito popular para fazer requisições HTTP.

Esse tema é particularmente relevante para desenvolvedores que estão trabalhando com React JS, já que Axios e React frequentemente são usados juntos.

O Que é o Bearer Token?

Um Bearer Token é uma string que serve como prova de identificação e autorização.

Geralmente é utilizado em conjunto com o padrão OAuth 2.0.

Quando um usuário faz login com sucesso, o servidor gera um token que é enviado ao cliente.

Este token deve ser incluído em requisições subsequentes para acessar recursos protegidos.

Por que Usar Axios?

Axios é uma biblioteca JavaScript que pode ser usada tanto no navegador quanto em aplicações Node.js. Ela é baseada em Promises e possui uma API simples e fácil de usar.

Além disso, o Axios permite que você configure globalmente informações como cabeçalhos HTTP, o que é perfeito para enviar tokens de autenticação.

Como Instalar o Axios

Se você ainda não instalou o Axios em seu projeto, pode fazer isso usando o seguinte comando:

npm install axios

Configurando o Axios para Enviar Bearer Token

Existem várias formas de enviar um Bearer Token usando Axios, mas vamos focar na abordagem mais otimizada e moderna.

Configuração Global

Uma das formas mais eficazes é configurar o Axios globalmente para incluir o Bearer Token em todas as requisições. Você pode fazer isso da seguinte maneira:

import axios from 'axios';

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Enviar em uma Requisição Específica

Se você preferir, pode incluir o token apenas em requisições específicas.

axios.get('https://api.exemplo.com/recursos', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
})

Exemplo com React JS

Vamos criar um exemplo em React JS que faz uma requisição a uma API protegida usando um Bearer Token.

import React, { useEffect } from 'react';
import axios from 'axios';

const MeuComponente = () => {
  const token = "seu_token_aqui";

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.exemplo.com/recursos', {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });
        console.log(response.data);
      } catch (error) {
        console.log("Ocorreu um erro:", error);
      }
    };

    fetchData();
  }, [token]);

  return (
    <div>
      Verifique o console para os dados recebidos.
    </div>
  );
};

Segurança e Melhores Práticas

Embora enviar um Bearer Token com Axios seja uma tarefa simples, é crucial levar em conta algumas práticas recomendadas de segurança:

• HTTPS: Sempre use HTTPS para garantir que o token seja criptografado durante o transporte.
• Armazenamento Seguro: Não armazene tokens sensíveis no localStorage ou sessionStorage devido a riscos de segurança como ataques de Cross-site Scripting (XSS).

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Enviar um Bearer Token usando Axios é uma tarefa simples, mas vital para a segurança e funcionalidade de suas aplicações em React JS. Neste artigo, exploramos diferentes métodos para enviar um Bearer Token com Axios, desde uma configuração global até métodos específicos para uma única requisição.

Também discutimos práticas de segurança para garantir que o uso de Bearer Tokens não exponha sua aplicação a riscos desnecessários. Com essas diretrizes, você está bem preparado para fazer requisições autenticadas em suas aplicações React de maneira eficaz e segura.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Usando Interceptors para anexar o token automaticamente:

Se você não quer ficar repetindo o header ‘Authorization’ em cada chamada, o Axios tem uma parada muito massa pra isso: os interceptors

Um interceptor roda antes de cada requisição sair, então dá pra pegar o token e injetar o Bearer de forma automática

import axios from ‘axios’;

axios.interceptors.request.use((config) => { const token = localStorage.getItem(‘token’); if (token) { config.headers.Authorization = Bearer ${token}; } return config; });

Com isso toda requisição que sair do Axios já vai com o Bearer Token no cabeçalho, sem você precisar lembrar de colocar em cada uma

É a abordagem que mais escala quando o projeto cresce

Criando uma instância do Axios com o token:

Outra forma bem organizada é criar uma instância própria do Axios já configurada com o Bearer Token

Assim você separa a config da API autenticada do resto do app

import axios from ‘axios’;

const api = axios.create({ baseURL: ‘https://api.exemplo.com’, headers: { Authorization: Bearer ${token} } });

Depois é só usar a instância ‘api’ no lugar do axios direto

api.get(‘/recursos’)

Fica limpo e reaproveitável em qualquer parte do projeto

Enviando Bearer Token em requisições POST:

Até aqui os exemplos usaram GET, mas é super comum precisar mandar o token num POST também, tipo ao criar ou atualizar um recurso

A lógica é a mesma: o token vai no terceiro parâmetro, dentro de headers

axios.post(‘https://api.exemplo.com/recursos’, { nome: ‘novo recurso’ }, { headers: { ‘Authorization’: Bearer ${token} } })

Repara que no POST o corpo (o objeto com os dados) vem ANTES do objeto de configuração com os headers

É um detalhe que confunde bastante gente no começo

Perguntas frequentes sobre Bearer Token com Axios:

Estou enviando o token mas recebo erro 401, o que fazer?

O 401 significa não autorizado

Na maioria das vezes é o token expirado, ausente ou com o prefixo errado

Confira se o valor do header está no formato ‘Bearer’ seguido de espaço e o token, e veja se o token ainda é válido

Qual a diferença entre Authorization e Bearer?

Authorization é o nome do cabeçalho HTTP

Bearer é o esquema de autenticação que vai dentro dele

Por isso o valor fica ‘Bearer seu_token_aqui’, tudo junto no header Authorization

Preciso mandar o Bearer Token em toda requisição?

Só nas que acessam recursos protegidos

Se for chamar muitas rotas protegidas, vale usar a configuração global ou um interceptor pra não repetir