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.