Vue Academy · Aula

Padrões de autenticação segura

Armazenamento de tokens (memória versus localStorage versus cookie httpOnly), atualização silenciosa e logout ao fechar a aba.

Padrões de autenticação segura é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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.

Tokens e onde armazená-los

As SPAs usam tokens para autenticação, mas o local onde você os armazena determina sua exposição a XSS e CSRF. O padrão moderno separa um token de acesso de curta duração de um token de atualização de longa duração, armazenando cada um de forma diferente.

O problema do localStorage

Armazenar tokens em localStorage é conveniente, mas perigoso: qualquer script injetado por XSS pode lê-lo e exfiltrar o token. Evite colocar credenciais nesse local.

// AVOID
localStorage.setItem("token", accessToken);

Token de acesso na memória

Mantenha o token de acesso em uma variável JavaScript ou em uma referência reativa. Ele desaparece ao recarregar a página, portanto um XSS bem-sucedido terá uma janela de oportunidade muito menor e nada permanecerá no disco.

import { ref } from "vue";

export const accessToken = ref(null);

Token de atualização em um cookie httpOnly

O token de atualização fica em um cookie HttpOnly, Secure, SameSite. O JavaScript não pode lê-lo, portanto o XSS não consegue roubá-lo, e o navegador o envia somente ao seu ponto de acesso de autenticação.

Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/auth

Anexando o token de acesso

Um interceptador de requisições do Axios adiciona o token de acesso mantido na memória ao cabeçalho de autorização em toda chamada.

api.interceptors.request.use((config) => {
  if (accessToken.value) {
    config.headers.Authorization = "Bearer " + accessToken.value;
  }
  return config;
});

Detectando expiração: o 401

Quando o token de acesso expira, o servidor responde com 401 Unauthorized. Um interceptador de respostas captura isso para acionar uma atualização.

api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401) {
      // attempt refresh
    }
    return Promise.reject(error);
  }
);

Atualizando o token

Ao receber um 401, chame o ponto de acesso de atualização. O navegador envia automaticamente o cookie de atualização httpOnly (withCredentials), e o servidor retorna um novo token de acesso.

const { data } = await axios.post("/auth/refresh", null, {
  withCredentials: true
});
accessToken.value = data.accessToken;

Repetindo a solicitação original

Após refreshing, reproduza a solicitação original que falhou com o novo token, para que o usuário nem perceba.

async (error) => {
  const original = error.config;
  if (error.response?.status === 401 && !original._retry) {
    original._retry = true;
    const { data } = await axios.post("/auth/refresh", null, { withCredentials: true });
    accessToken.value = data.accessToken;
    original.headers.Authorization = "Bearer " + data.accessToken;
    return api(original);
  }
  return Promise.reject(error);
}

Evitando rajadas de atualização

Se muitas solicitações retornarem 401 ao mesmo tempo, enfileire-as atrás de uma única atualização em andamento, para não chamar repetidamente o ponto de acesso de atualização.

let refreshing = null;
function refresh() {
  if (!refreshing) {
    refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
      .finally(() => { refreshing = null; });
  }
  return refreshing;
}

Encerrando a sessão

Ao sair, limpe o token mantido em memória e chame um ponto de acesso que limpe o cookie de renovação no servidor.

async function logout() {
  accessToken.value = null;
  await axios.post("/auth/logout", null, { withCredentials: true });
}

Combinando com a proteção contra CSRF

Como o cookie de renovação é enviado automaticamente, proteja esse ponto de acesso com SameSite e tokens CSRF, assim como as outras rotas autenticadas por cookie.

Verificação rápida

Onde devem ser armazenados o token de acesso e o token de renovação?

Recapitulação

Armazene o token de acesso em uma referência em memória (nunca em localStorage) e o token de renovação em um cookie HttpOnly. Um interceptador de solicitações anexa o token bearer; um interceptador de respostas captura 401, chama o ponto de acesso de renovação, atualiza o token e repete a solicitação original, eliminando renovações simultâneas duplicadas e combinando essa estratégia com proteções contra CSRF.

Perguntas Frequentes

A aula “Padrões de autenticação segura” é grátis?

Sim — o texto completo de “Padrões de autenticação segura” é 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 “Padrões de autenticação segura”?

Armazenamento de tokens (memória versus localStorage versus cookie httpOnly), atualização silenciosa e logout ao fechar a aba. 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 4 de 4.

Quanto tempo leva a aula “Padrões de autenticação segura”?

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

← Voltar para Vue Academy