Запоминание с помощью Cookies
Часть раздела Аутентификация и безопасность путешествия по Node.js на Coddy. Урок 8 из 24.
HTTP забывает о вас между запросами: каждый запрос приходит отдельно, и сервер не может определить, что он поступил из того же браузера. Это исправляет cookie. Сервер отвечает заголовком Set-Cookie, а браузер отправляет значение обратно в заголовке Cookie при каждом последующем запросе к этому сайту.
res.cookie(name, value) устанавливает cookie. req.get('cookie') считывает заголовок Cookie, отправленный браузером, как одну строку текста. Express не считывает заголовок Cookie за вас (это делал бы пакет cookie-parser), поэтому в cookies.js есть функция parseCookies. Все значения поступают в виде текста.
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}`);
});Задание
ЛегкоGET /visit должен считать, сколько раз этот браузер обращался к нему. Сервер не сохраняет счётчик. Счётчик передаётся в cookie, и браузер отправляет его обратно с каждым запросом.
- В
server.js, в обработчикеGET /visit, прочитай cookie, отправленные браузером, используяparseCookies, как показано в уроке. Счётчик хранится в cookie с именемvisits. Он приходит в виде текста, например"2". При первом посещении cookie отсутствует, что считается за 0. - Прибавь к счётчику 1 как к числу, чтобы
"2"стало3, а не"21". - Установи для cookie
visitsновое значение счётчика, чтобы браузер отправил его обратно в следующий раз. - Отправь ответ с новым значением счётчика в виде числа, а не текста:
{"visits": 3}.
Попробуй: Нажми «Играть». Отправь GET /visit: {"visits": 1}. Отправь его ещё раз: {"visits": 2}. Отправь его в третий раз: {"visits": 3}. Открой вкладку Headers этого ответа: в Set-Cookie указано visits=3; Path=/.
Попробуйте сами
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 });
});
// Подсчитывает, сколько раз этот браузер обращался к GET /visit.
app.get('/visit', (req, res) => {
const visits = 1;
res.json({ visits });
});
// Заметки. Пока любой может читать и добавлять их.
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');
});
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Аутентификация и безопасность
Потренируйтесь самостоятельно: Песочница Express