Vue Academy · leksjon

Sikre autentiseringsmønstre

Lagring av tokens (minne vs. localStorage vs. httpOnly-cookie), stille fornyelse og utlogging når fanen lukkes.

Leksjon 4 av 413 trinn

Sikre autentiseringsmønstre er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Tokens og hvor de lagres

SPA-er autentiserer med tokens, men hvor du lagrer dem avgjør hvor utsatt du er for XSS og CSRF. Det moderne mønsteret skiller mellom et kortlevd tilgangstoken og et langlevd fornyelsestoken, som lagres på hver sin måte.

Problemet med localStorage

Det er praktisk å lagre tokens i localStorage, men det er farlig: ethvert XSS-injisert skript kan lese det og eksfiltrere tokenet. Unngå å legge legitimasjon der.

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

Tilgangstoken i minnet

Behold tilgangstokenet i en JavaScript-variabel eller en reaktiv ref. Det forsvinner ved ny innlasting, så et vellykket XSS-angrep har et mye mindre tidsvindu, og ingenting lagres på disk.

import { ref } from "vue";

export const accessToken = ref(null);

Fornyelsestoken i en httpOnly-cookie

Fornyelsestokenet ligger i en cookie med HttpOnly, Secure og SameSite. JavaScript kan ikke lese det, så XSS kan ikke stjele det, og nettleseren sender det bare til autentiseringsendepunktet.

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

Legg til tilgangstokenet

En interceptor for Axios-forespørsler legger tilgangstokenet fra minnet i Authorization-headeren for hvert kall.

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

Oppdag utløp: 401

Når tilgangstokenet utløper, svarer serveren med 401 Unauthorized. En responsinterceptor fanger opp dette for å utløse en fornyelse.

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

Forny tokenet

Ved en 401-forespørsel kaller du fornyelsesendepunktet. Nettleseren sender httpOnly-fornyelsescookien automatisk (withCredentials), og serveren returnerer et nytt tilgangstoken.

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

Gjenta den opprinnelige forespørselen

Etter å ha fornyet tokenet gjentar du den opprinnelige forespørselen som mislyktes, med det nye tokenet, slik at brukeren ikke merker noe.

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);
}

Unngå refresh-stormer

Hvis mange forespørsler får 401 samtidig, legger du dem i kø bak én pågående refresh, slik at refresh-endepunktet ikke kalles gjentatte ganger.

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

Logge ut

Ved utlogging sletter du tokenet fra minnet og kaller et endepunkt som sletter refresh-cookien på serversiden.

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

Kombiner med CSRF-beskyttelse

Ettersom refresh-cookien sendes automatisk, må du beskytte dette endepunktet med SameSite og CSRF-token på samme måte som andre ruter som autentiseres med informasjonskapsler.

Rask kontroll

Hvor bør henholdsvis access-tokenet og refresh-tokenet lagres?

Besvar den i den interaktive leksjonen

Oppsummering

Lagre access-tokenet i en referanse i minnet, aldri i localStorage, og refresh-tokenet i en HttpOnly-informasjonskapsel. En forespørselsinterceptor legger til bearer-tokenet, mens en responsinterceptor fanger opp 401, kaller refresh-endepunktet, oppdaterer tokenet og prøver den opprinnelige forespørselen på nytt – samtidig som samtidige refresh-operasjoner slås sammen og kombineres med CSRF-beskyttelse.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Sikre autentiseringsmønstre» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Sikre autentiseringsmønstre», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Sikre autentiseringsmønstre»?

Lagring av tokens (minne vs. localStorage vs. httpOnly-cookie), stille fornyelse og utlogging når fanen lukkes. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Sikre autentiseringsmønstre»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Vue Academy