Ricordare con i cookie

Fa parte della sezione Autenticazione e sicurezza del percorso Node.js di Coddy. Lezione 8 di 24.

HTTP si dimentica di te tra una richiesta e l'altra: ognuna arriva da sola e il server non può sapere che proviene dallo stesso browser. Un cookie risolve il problema. Il server risponde con un'intestazione Set-Cookie e il browser invia il valore di nuovo in un'intestazione Cookie a ogni richiesta successiva a quel sito.

res.cookie(name, value) ne imposta uno. req.get('cookie') legge l'intestazione Cookie inviata dal browser, come un'unica riga di testo. Express non legge l'intestazione Cookie al posto tuo (lo farebbe il pacchetto cookie-parser), quindi cookies.js ti fornisce parseCookies. Ogni valore arriva come testo.

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

Sfida

Facile

GET /visit dovrebbe contare quante volte questo browser lo ha chiamato. Il server non salva il conteggio. Il conteggio viaggia in un cookie e il browser lo invia di nuovo a ogni richiesta.

In server.js, in GET /visit, leggi i cookie inviati dal browser usando parseCookies, come mostrato nella lezione. Il conteggio è nel cookie chiamato visits. Arriva come testo, ad esempio "2". Alla prima visita manca, quindi il conteggio è 0.
Aggiungi 1 al conteggio come numero, così "2" diventa 3, non "21".
Imposta il cookie visits sul nuovo conteggio, così il browser lo invierà di nuovo la prossima volta.
Rispondi con il nuovo conteggio come numero, non come testo: {"visits": 3}.

Prova: premi «Run». Invia GET /visit: {"visits": 1}. Invialo di nuovo: {"visits": 2}. Invialo una terza volta: {"visits": 3}. Apri la scheda Headers di quella risposta: Set-Cookie indica visits=3; Path=/.

Provalo tu

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

// Conta quante volte questo browser ha chiamato GET /visit.
app.get('/visit', (req, res) => {
    const visits = 1;
    res.json({ visits });
});

// Note. Per ora chiunque può leggerle e scriverle.
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');
});

Mettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Autenticazione e sicurezza

Esercitati da solo: Playground Express