Como adicionar Authorization no request do Axios

Neste artigo você aprenderá a como colocar o Authorization no request do Axios, veja como é simples fazer isso!

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

O Axios é uma biblioteca popular de cliente HTTP baseada em promessas para fazer requisições AJAX tanto no navegador quanto no Node.js.

Uma das características mais poderosas do Axios é sua capacidade de configurar globalmente as configurações de requisição, incluindo cabeçalhos.

Uma aplicação comum disso é adicionar um cabeçalho de “Authorization” para autenticar requisições a uma API.

Neste artigo, vamos explorar como adicionar um cabeçalho de “Authorization” às suas requisições Axios em um projeto React JS, utilizando componentes funcionais.

Configurando o Axios Globalmente

Para muitas aplicações, é conveniente definir configurações globais para o Axios para que todas as requisições se beneficiem destas configurações.

Configuração Básica

import axios from 'axios';

// Configuração global do Axios
axios.defaults.headers.common['Authorization'] = 'Bearer SEU_TOKEN_AQUI';

Ao definir o cabeçalho “Authorization” dessa maneira, todas as subsequentes requisições feitas com o Axios incluirão esse cabeçalho.

Utilizando Axios em Componentes React

Vamos criar um componente React funcional que faz uma requisição a uma API e exibe os dados retornados.

Exemplo de Componente Funcional

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

const ListarDados = () => {
  const [dados, setDados] = useState([]);

  useEffect(() => {
    const buscarDados = async () => {
      try {
        const resposta = await axios.get('https://api.exemplo.com/dados');
        setDados(resposta.data);
      } catch (erro) {
        console.error('Houve um erro ao buscar os dados:', erro);
      }
    };

    buscarDados();
  }, []);

  return (
    <div>
      {dados.map(item => (
        <div key={item.id}>{item.nome}</div>
      ))}
    </div>
  );
};

Adicionando Authorization por Requisição

Se você não quiser definir o cabeçalho “Authorization” globalmente, ou se tiver vários tokens diferentes para usar, pode definir o cabeçalho por requisição.

Exemplo de Authorization por Requisição

const resposta = await axios.get('https://api.exemplo.com/dados', {
  headers: {
    Authorization: 'Bearer SEU_TOKEN_AQUI'
  }
});

Criando um Axios Instance

Para maior reutilização e organização, você pode criar uma “instância” do Axios com configurações predefinidas.

const api = axios.create({
  baseURL: 'https://api.exemplo.com',
  headers: {
    Authorization: 'Bearer SEU_TOKEN_AQUI'
  }
});

// Utilizando a instância em um componente React
const resposta = await api.get('/dados');

Cuidados e Considerações

Mantenha Seus Tokens Seguros

Nunca exponha seu token de autenticação no lado do cliente. Se estiver trabalhando com React no lado do cliente, considere utilizar proxies ou outras abordagens para manter seus tokens seguros.

Lide com Erros Adequadamente

Ao fazer requisições a APIs, especialmente com autenticação, sempre esteja preparado para lidar com erros, como tokens inválidos ou expirados.

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

Conclusão

Chegamos ao fim do artigo sobre como adicionar o Authorization no request do Axios!

O Axios oferece uma flexibilidade incrível para configurar e fazer requisições HTTP, tornando-o uma escolha popular para muitos desenvolvedores React.

Ao entender como adicionar cabeçalhos, como o “Authorization”, às suas requisições, você pode interagir com APIs protegidas de maneira eficiente e segura.

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