Vue Academy · Aula

Chamadas autenticadas à API com interceptadores do Axios

Interceptador de solicitação para o cabeçalho Authorization e interceptador de resposta para 401 → atualização → nova tentativa.

Aula 3 de 413 etapas

Chamadas autenticadas à API com interceptadores do Axios é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O padrão de interceptadores

Em vez de anexar cabeçalhos de autenticação e lidar com erros 401 em cada chamada, os interceptadores do Axios centralizam essa lógica. Um interceptador de requisição adiciona o token; um interceptador de resposta lida de forma transparente com a expiração e a atualização.

Criando a instância do Axios

Crie uma instância dedicada com a URL base da API e withCredentials para que o cookie de atualização httpOnly seja enviado à rota de atualização.

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  withCredentials: true // send cookies
})

export default api

Armazenando o token de acesso na memória

Mantenha o token de acesso em uma variável de módulo (ou em um armazenamento Pinia), em vez de localStorage. Um pequeno par de funções de acesso permite que os interceptadores leiam e atualizem o token.

let accessToken = null

export function setAccessToken(t) { accessToken = t }
export function getAccessToken() { return accessToken }

Interceptador de requisição: adicionando o cabeçalho

O interceptador de requisição é executado antes de cada requisição e anexa Authorization: Bearer <token> quando existe um token.

api.interceptors.request.use((config) => {
  const token = getAccessToken()
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
})

Interceptador de resposta: capturando 401

O interceptador de resposta deixa as respostas bem-sucedidas passarem sem alterações, mas, em caso de 401, inicia o fluxo de atualização.

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const original = error.config
    if (error.response?.status === 401 && !original._retried) {
      // ... refresh and retry (next scenes)
    }
    return Promise.reject(error)
  }
)

Evitando ciclos infinitos de novas tentativas

Marque a requisição com falha usando um sinalizador como _retried para que ela seja repetida apenas uma vez. Se a própria atualização retornar 401, a requisição será rejeitada em vez de entrar em um ciclo infinito.

if (error.response?.status === 401 && !original._retried) {
  original._retried = true
  // attempt refresh exactly once for this request
}

Chamando a rota de atualização

Em caso de 401, faça POST para /auth/refresh. O navegador envia automaticamente o cookie de atualização httpOnly; o servidor responde com um novo token de acesso.

const { data } = await api.post('/auth/refresh')
setAccessToken(data.accessToken)

Repetindo a requisição original

Depois da atualização, atualize o cabeçalho na configuração original e repita a requisição. O usuário nunca percebe a interrupção.

original.headers.Authorization = 'Bearer ' + data.accessToken
return api(original) // retry the original request

Lidando com 401 simultâneos

Se muitas requisições falharem ao mesmo tempo, você não vai querer N chamadas de atualização em paralelo. Compartilhe uma única promessa de atualização em andamento; as requisições enfileiradas aguardam por ela e depois tentam novamente com o novo token.

let refreshing = null

function refreshOnce() {
  if (!refreshing) {
    refreshing = api.post('/auth/refresh')
      .finally(() => { refreshing = null })
  }
  return refreshing
}

Desistindo: forçando o encerramento da sessão

Se a atualização falhar (token de atualização expirado ou inválido), limpe o token mantido na memória e redirecione para a autenticação. Este é o único ponto que trata a expiração da sessão em todo o app.

try {
  await refreshOnce()
} catch {
  setAccessToken(null)
  router.push('/login')
  return Promise.reject(error)
}

Usando a instância nos componentes

Os componentes apenas importam a instância api configurada e fazem chamadas. Cabeçalhos de autenticação, atualização e novas tentativas ficam totalmente transparentes para o código dos componentes.

<script setup>
import api from '@/lib/api'
import { ref, onMounted } from 'vue'

const profile = ref(null)
onMounted(async () => {
  const { data } = await api.get('/me')
  profile.value = data
})
</script>

Verificação rápida

Teste sua compreensão dos interceptadores do Axios.

Responda na aula interativa

Revisão

Você aprendeu a fazer chamadas autenticadas com interceptadores:

O interceptador de requisição adiciona Authorization: Bearer usando o token mantido na memória
O interceptador de resposta captura 401 e faz a atualização
Um sinalizador _retried repete a requisição original exatamente uma vez
POST /auth/refresh usa o cookie httpOnly para obter um novo token
Compartilhe uma promessa de atualização para 401 simultâneos; force o encerramento da sessão em caso de falha

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 42
Aulas: 156

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Chamadas autenticadas à API com interceptadores do Axios” é grátis?

Sim — o texto completo de “Chamadas autenticadas à API com interceptadores do Axios” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Chamadas autenticadas à API com interceptadores do Axios”?

Interceptador de solicitação para o cabeçalho Authorization e interceptador de resposta para 401 → atualização → nova tentativa. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Chamadas autenticadas à API com interceptadores do Axios”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Backend Fastify para SPAs Vue
Autenticação JWT: login e atualização
Chamadas autenticadas à API com interceptadores do Axios
Implantação de Vue full-stack em produção

← Voltar para Vue Academy