Vue Academy · Lekcja

Bezpieczne wzorce uwierzytelniania

Przechowywanie tokenów (pamięć, localStorage lub ciastko httpOnly), ciche odświeżanie oraz wylogowanie przy zamknięciu karty.

Bezpieczne wzorce uwierzytelniania to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Tokeny i miejsce ich przechowywania

Aplikacje SPA uwierzytelniają użytkowników za pomocą tokenów, ale sposób ich przechowywania decyduje o narażeniu na XSS i CSRF. Współczesne podejście rozdziela krótkotrwały token dostępu od długotrwałego tokenu odświeżającego, przechowując każdy z nich w inny sposób.

Problem z localStorage

Przechowywanie tokenów w localStorage jest wygodne, ale niebezpieczne: każdy skrypt wstrzyknięty za pomocą XSS może je odczytać i wyprowadzić token. Należy unikać umieszczania tam danych uwierzytelniających.

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

Token dostępu w pamięci

Token dostępu należy przechowywać w zmiennej JavaScript lub reaktywnym obiekcie ref. Znika on po ponownym załadowaniu strony, więc udany atak XSS ma znacznie krótsze okno działania, a na dysku nie pozostają żadne dane.

import { ref } from "vue";

export const accessToken = ref(null);

Token odświeżający w pliku cookie httpOnly

Token odświeżający znajduje się w pliku cookie z atrybutami HttpOnly, Secure i SameSite. JavaScript nie może go odczytać, więc XSS nie może go wykraść, a przeglądarka wysyła go wyłącznie do punktu końcowego uwierzytelniania.

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

Dołączanie tokenu dostępu

Interceptor żądań Axios dodaje token dostępu przechowywany w pamięci do nagłówka Authorization przy każdym wywołaniu.

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

Wykrywanie wygaśnięcia: 401

Po wygaśnięciu tokenu dostępu serwer odpowiada kodem 401 Unauthorized. Interceptor odpowiedzi przechwytuje ten kod, aby uruchomić odświeżanie tokenu.

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

Odświeżanie tokenu

Po otrzymaniu kodu 401 należy wywołać punkt końcowy odświeżania. Przeglądarka automatycznie wysyła plik cookie z tokenem odświeżającym oznaczony jako httpOnly (withCredentials), a serwer zwraca nowy token dostępu.

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

Ponowienie pierwotnego żądania

Po odświeżeniu należy ponowić pierwotne nieudane żądanie z nowym tokenem, aby użytkownik niczego nie zauważył.

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

Zapobieganie lawinie odświeżeń

Jeśli wiele żądań jednocześnie otrzyma odpowiedź 401, należy ustawić je w kolejce za jednym trwającym odświeżeniem, aby nie wywoływać wielokrotnie endpointu odświeżania.

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

Wylogowanie

Podczas wylogowywania należy wyczyścić token przechowywany w pamięci i wywołać endpoint, który usuwa ciasteczko odświeżania po stronie serwera.

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

Połączenie z ochroną CSRF

Ponieważ ciasteczko odświeżania jest wysyłane automatycznie, ten endpoint należy chronić za pomocą SameSite i tokenów CSRF, tak jak inne trasy uwierzytelniane za pomocą ciasteczek.

Szybkie sprawdzenie

Gdzie należy przechowywać token dostępu, a gdzie token odświeżania?

Podsumowanie

Token dostępu należy przechowywać w odwołaniu w pamięci (nigdy w localStorage), a token odświeżania w ciasteczku HttpOnly. Interceptor żądań dołącza token bearer; interceptor odpowiedzi przechwytuje 401, wywołuje endpoint odświeżania, aktualizuje token i ponawia pierwotne żądanie — eliminując duplikowanie równoczesnych odświeżeń i współpracując z ochroną CSRF.

Często zadawane pytania

Czy lekcja „Bezpieczne wzorce uwierzytelniania” jest bezpłatna?

Tak — pełny tekst „Bezpieczne wzorce uwierzytelniania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Bezpieczne wzorce uwierzytelniania”?

Przechowywanie tokenów (pamięć, localStorage lub ciastko httpOnly), ciche odświeżanie oraz wylogowanie przy zamknięciu karty. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Bezpieczne wzorce uwierzytelniania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy