Turvallisen autentikoinnin mallit
Tokenien tallennus (muisti vs localStorage vs httpOnly-eväste), hiljainen päivitys ja uloskirjautuminen välilehden sulkemisen yhteydessä
Turvallisen autentikoinnin mallit on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Tunnisteet ja niiden säilytyspaikat
SPA-sovellukset todentavat käyttäjän tunnisteilla, mutta niiden säilytyspaikka määrittää XSS- ja CSRF-riskin. Nykyisessä suositellussa mallissa lyhytikäinen käyttöoikeustunniste erotetaan pitkäikäisestä päivitystunnisteesta ja kumpikin tallennetaan eri tavalla.
localStoragen ongelma
Tunnisteiden tallentaminen localStorage-säilöön on kätevää mutta vaarallista: mikä tahansa XSS-hyökkäyksellä lisätty komentosarja voi lukea tunnisteen ja siirtää sen hyökkääjälle. Välttäkää tunnistetietojen tallentamista sinne.
// AVOID
localStorage.setItem("token", accessToken);Käyttöoikeustunniste muistissa
Säilyttäkää käyttöoikeustunniste JavaScript-muuttujassa tai reaktiivisessa ref-objektissa. Se häviää uudelleenlatauksessa, joten onnistuneella XSS-hyökkäyksellä on paljon lyhyempi aikaikkuna eikä levylle jää mitään pysyvästi.
import { ref } from "vue";
export const accessToken = ref(null);Päivitystunniste httpOnly-evästeessä
Päivitystunniste säilytetään HttpOnly-, Secure- ja SameSite-määritteillä varustetussa evästeessä. JavaScript ei voi lukea sitä, joten XSS ei voi varastaa sitä, ja selain lähettää sen vain todennuspalvelun päätepisteeseen.
Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/authKäyttöoikeustunnisteen liittäminen
Axiosin pyyntöinterseptori lisää muistissa olevan käyttöoikeustunnisteen Authorization-otsakkeeseen jokaisessa kutsussa.
api.interceptors.request.use((config) => {
if (accessToken.value) {
config.headers.Authorization = "Bearer " + accessToken.value;
}
return config;
});Vanhentumisen tunnistaminen: 401
Kun käyttöoikeustunniste vanhentuu, palvelin vastaa koodilla 401 Unauthorized. Vasteresponseri sieppaa tämän ja käynnistää päivityksen.
api.interceptors.response.use(
(res) => res,
async (error) => {
if (error.response?.status === 401) {
// attempt refresh
}
return Promise.reject(error);
}
);Tunnisteen päivittäminen
Kun vastaus on 401, kutsukaa päivityspäätepistettä. Selain lähettää httpOnly-päivitysevästeen automaattisesti (withCredentials), ja palvelin palauttaa uuden käyttöoikeustunnisteen.
const { data } = await axios.post("/auth/refresh", null, {
withCredentials: true
});
accessToken.value = data.accessToken;Alkuperäisen pyynnön uudelleenyritys
Kun token on päivitetty, alkuperäinen epäonnistunut pyyntö toistetaan uuden tokenin kanssa, jotta käyttäjä ei huomaa keskeytystä.
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);
}Refresh-ryntäysten välttäminen
Jos useat pyynnöt saavat samanaikaisesti 401-vastauksen, ne asetetaan jonoon yhden käynnissä olevan tokenin päivityksen taakse, jotta päivityspäätepistettä ei kutsuta toistuvasti.
let refreshing = null;
function refresh() {
if (!refreshing) {
refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
.finally(() => { refreshing = null; });
}
return refreshing;
}Uloskirjautuminen
Uloskirjautumisen yhteydessä muistissa oleva token tyhjennetään ja kutsutaan päätepistettä, joka tyhjentää refresh-cookien palvelimella.
async function logout() {
accessToken.value = null;
await axios.post("/auth/logout", null, { withCredentials: true });
}Yhdistäminen CSRF-suojaukseen
Koska refresh-cookie lähetetään automaattisesti, tämä päätepiste on suojattava SameSite-määrityksellä ja CSRF-tokeneilla aivan kuten muutkin cookie-todennusta käyttävät reitit.
Pikatarkistus
Mihin access token ja refresh token pitäisi kumpikin tallentaa?
Kertaus
Access token tallennetaan muistissa olevaan ref-muuttujaan (ei koskaan localStorageen) ja refresh token HttpOnly-cookieen. Pyyntöinterseptori liittää bearer-tokenin; vastausinterseptori tunnistaa 401-vastauksen, kutsuu päivityspäätepistettä, päivittää tokenin ja yrittää alkuperäistä pyyntöä uudelleen yhdistämällä samanaikaiset päivitykset sekä käyttämällä CSRF-suojausta.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Turvallisen autentikoinnin mallit” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Turvallisen autentikoinnin mallit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Turvallisen autentikoinnin mallit”?
Tokenien tallennus (muisti vs localStorage vs httpOnly-eväste), hiljainen päivitys ja uloskirjautuminen välilehden sulkemisen yhteydessä Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Turvallisen autentikoinnin mallit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- XSS:n estäminen Vuessa
- Content Security Policy (CSP) Vuen kanssa
- CSRF-suojaus Vue SPA -sovelluksissa
- Turvallisen autentikoinnin mallit