Como enviar authorization no header com Axios

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!