Mengingat dengan Cookie

Termasuk bagian Autentikasi dan Keamanan dalam perjalanan Node.js di Coddy. Pelajaran 8 dari 24.

HTTP melupakanmu di antara permintaan: setiap permintaan datang sendiri, dan server tidak dapat mengetahui bahwa permintaan itu berasal dari browser yang sama. Cookie mengatasi hal itu. Server menjawab dengan header Set-Cookie, lalu browser mengirimkan kembali nilainya dalam header Cookie pada setiap permintaan berikutnya ke situs tersebut.

res.cookie(name, value) menetapkan satu cookie. req.get('cookie') membaca header Cookie yang dikirim browser, sebagai satu baris teks. Express tidak membaca header Cookie untukmu (paket cookie-parser dapat melakukannya), jadi cookies.js menyediakan parseCookies. Setiap nilai diterima sebagai teks.

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

Tantangan

Mudah

GET /visit seharusnya menghitung berapa kali browser ini memanggilnya. Server tidak menyimpan hitungan tersebut. Hitungan itu dibawa dalam cookie, lalu browser mengirimkannya kembali pada setiap permintaan.

Di server.js, pada GET /visit, baca cookie yang dikirim browser dengan menggunakan parseCookies, seperti yang ditunjukkan dalam pelajaran. Hitungan tersimpan dalam cookie bernama visits. Nilainya diterima sebagai teks, seperti "2". Pada kunjungan pertama, cookie ini belum ada, jadi hitungannya adalah 0.
Tambahkan 1 ke hitungan sebagai angka, sehingga "2" menjadi 3, bukan "21".
Atur cookie visits ke hitungan baru agar browser mengirimkannya kembali nanti.
Berikan respons dengan hitungan baru sebagai angka, bukan teks: {"visits": 3}.

Coba: Tekan tombol “Jalankan”. Kirim GET /visit: {"visits": 1}. Kirim lagi: {"visits": 2}. Kirim untuk ketiga kalinya: {"visits": 3}. Buka tab Headers pada respons itu: Set-Cookie menyatakan visits=3; Path=/.

Coba sendiri

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

// Menghitung berapa kali browser ini mengakses GET /visit.
app.get('/visit', (req, res) => {
    const visits = 1;
    res.json({ visits });
});

// Catatan. Untuk saat ini, siapa pun dapat membaca dan menulis catatan.
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');
});

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Autentikasi dan Keamanan

Latihan sendiri: Playground Express