Como enviar authorization no header com Axios

NodeJS 8 de Jan de 2022

Axios é um cliente HTTP baseado em promessa simples para a web e node.js. O Axios oferece uma biblioteca simples de usar em um pequeno pacote com uma interface bastante extensível e fácil de utilizar.

Para definir cabeçalhos em uma solicitação Axios POST, passe um terceiro objeto para a chamada axios.post().

Você já deve estar usando o segundo parâmetro para enviar dados e, se passar 2 objetos após a string do URL, o primeiro são os dados e o segundo é o objeto de configuração, onde você adiciona uma propriedade headers contendo outro objeto:

axios.post(url, {
  data: {
    ...
  }
})

Agora com o terceiro parâmetro:

axios.post(url, {
  //...data
}, {
  headers: {
    ...
  }
})

Definindo o Authorization

Agora que já sabemos onde a propriedade authorization deve ficar, baste inseri-la com seu respectivo valor:

const token = '..seu token..'

axios.post(url, {
  //...data
}, {
  headers: {
    'Authorization': `Basic ${token}` 
  }
})

(o token de autorização pode ser diferente, verifique com o aplicativo que você está usando, neste exemplo eu utilizei o Basic)

Para definir cabeçalhos em uma solicitação Axios GET, passe um segundo objeto para a chamada axios.get(), por exemplo, esta é uma solicitação GET na api do  GitHub GET o recurso /user

axios.get('https://api.github.com/user', {
  headers: {
    'Authorization': `token ${access_token}`
  }
})
.then((res) => {
  console.log(res.data)
})
.catch((error) => {
  console.error(error)
})

Exemplo de uso mais comum

Geralmente a autenticação do tipo authorization, seu token é composto pelo usuário e senha criptografado em base64. Neste último exemplo eu faço exatamente isso, em posse do usuário e senha, então eu faço a cripitografía deles e envio na solicitação.

Veja como ficou:

const username = ''
const password = ''

const token = Buffer.from(`${username}:${password}`, 'utf8').toString('base64')

const url = 'https://...'
const data = {
  ...
}

axios.post(url, data, {
  headers: {
    'Authorization': `Basic ${token}`
  },
})

Concluindo

Neste post eu mostrei como é simples enviar authorizatonno header das requisições usando a lib Axios. Espero que tenha ficado mais claro para você como fazer isso em seu trabalho.

😉Sinta-se a vontade para me contar nos comentários caso tenha alguma dúvida!

Josias Pereira

Programador full-stack sênior e apaixonado por ensinar. No tempo livre adora compartilhar conhecimentos e experiências das tecnologias de desenvolvimento back-end e front-end que mais gosta.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.