Zapamiętywanie za pomocą plików cookie

Część sekcji Uwierzytelnianie i bezpieczeństwo ścieżki Node.js w Coddy. Lekcja 8 z 24.

HTTP nie pamięta o Tobie między żądaniami: każde z nich przychodzi osobno, a serwer nie może stwierdzić, że pochodzi z tej samej przeglądarki. Rozwiązuje to ciasteczko. Serwer odpowiada nagłówkiem Set-Cookie, a przeglądarka wysyła tę wartość z powrotem w nagłówku Cookie przy każdym kolejnym żądaniu do tej witryny.

res.cookie(name, value) ustawia ciasteczko. req.get('cookie') odczytuje nagłówek Cookie wysłany przez przeglądarkę w postaci jednego wiersza tekstu. Express nie odczytuje za Ciebie nagłówka Cookie (zrobiłby to pakiet cookie-parser), dlatego plik cookies.js udostępnia Ci parseCookies. Każda wartość jest odbierana jako tekst.

app.get('/theme/:name', (req, res) => {
    res.cookie('theme', req.params.name);
    res.send('Saved');
});

app.get('/', (req, res) => {
    const { theme = 'light' } = parseCookies(req.get('cookie'));
    res.send(`Your theme is ${theme}`);
});

Wyzwanie

Łatwy

GET /visit powinno zliczać, ile razy ta przeglądarka wysłała to żądanie. Serwer nie zapisuje licznika. Licznik jest przesyłany w pliku cookie, a przeglądarka odsyła go przy każdym żądaniu.

W pliku server.js, w obsłudze GET /visit, odczytaj pliki cookie wysłane przez przeglądarkę, używając parseCookies, tak jak pokazano w lekcji. Licznik znajduje się w pliku cookie o nazwie visits. Jest przesyłany jako tekst, na przykład "2". Przy pierwszej wizycie go brakuje, co oznacza 0.
Dodaj 1 do licznika jako liczby, aby "2" zmieniło się w 3, a nie w "21".
Ustaw plik cookie visits na nową wartość licznika, aby przeglądarka odesłała go następnym razem.
Odpowiedz nową wartością licznika jako liczbą, a nie tekstem: {"visits": 3}.

Wypróbuj: Naciśnij „Uruchom”. Wyślij GET /visit: {"visits": 1}. Wyślij ponownie: {"visits": 2}. Wyślij po raz trzeci: {"visits": 3}. Otwórz kartę Headers tej odpowiedzi: Set-Cookie zawiera visits=3; Path=/.

Spróbuj swoich sił

import express from 'express';
import { parseCookies } from './cookies.js';
import { notes, users } from './db.js';
import { hashPassword, verifyPassword } from './passwords.js';

const app = express();
app.use(express.json());

app.post('/signup', async (req, res) => {
    const username = String(req.body.username ?? '').trim().toLowerCase();
    const password = String(req.body.password ?? '');
    if (!username || password.length < 8) {
        return res.status(400).json({ error: 'Pick a username and a password of at least 8 characters' });
    }
    if (await users.findOne({ username })) {
        return res.status(409).json({ error: 'That username is taken' });
    }
    await users.insertOne({ username, passwordHash: await hashPassword(password) });
    res.status(201).json({ username });
});

app.post('/login', async (req, res) => {
    const username = String(req.body.username ?? '').trim().toLowerCase();
    const user = await users.findOne({ username });
    if (!user || !(await verifyPassword(String(req.body.password ?? ''), user.passwordHash))) {
        return res.status(401).json({ error: 'Wrong username or password' });
    }
    res.json({ username: user.username });
});

// Liczy, ile razy ta przeglądarka wywołała GET /visit.
app.get('/visit', (req, res) => {
    const visits = 1;
    res.json({ visits });
});

// Notatki. Na razie każdy może je czytać i zapisywać.
app.get('/notes', async (req, res) => {
    res.json(await notes.find().toArray());
});

app.post('/notes', async (req, res) => {
    const note = { text: String(req.body.text ?? '') };
    await notes.insertOne(note);
    res.status(201).json(note);
});

app.listen(3000, () => {
    console.log('Vault is running on port 3000');
});