Chuyển hướng

Thuộc phần Kiến thức cơ bản về Express trong hành trình Node.js của Coddy. Bài học 12 trên 23.

Các trang web thay đổi, nhưng những liên kết cũ trong dấu trang và kết quả tìm kiếm vẫn nên dẫn đến một nơi nào đó.

app.get('/old-prices', (req, res) => {
    res.redirect(301, '/prices');
});

Phản hồi redirect gửi trạng thái và tiêu đề Location có URL mới, rồi trình duyệt lập tức truy cập URL đó. res.redirect thiết lập cả hai.

Trạng thái cho biết việc chuyển hướng kéo dài bao lâu. 301 có nghĩa là chuyển hẳn: trình duyệt và công cụ tìm kiếm ghi nhớ địa chỉ mới và ngừng yêu cầu địa chỉ cũ. 302, trạng thái mặc định nếu bạn không truyền trạng thái nào, có nghĩa là tạm thời, vì vậy chúng vẫn dùng URL cũ.

Thử thách

Dễ

Các trang menu cũ đã được chuyển hẳn sang các trang công thức, và dấu trang cũ vẫn hoạt động.

Trong server.js, thêm một route cho /menu chuyển hướng đến /recipes với trạng thái 301, nghĩa là đã chuyển hẳn.
Thêm một route cho /menu/:id chuyển hướng đến trang công thức có cùng id, cũng với trạng thái 301: /menu/3 chuyển đến /recipes/3.

Thử nhé: Nhấn Chạy và gửi /menu/3. Bạn sẽ thấy trạng thái 301 và header Location có giá trị /recipes/3. Gửi /menu: trạng thái 301 với Location là /recipes. Gửi /menu/42: trạng thái 301 với Location là /recipes/42. Lệnh chuyển hướng không kiểm tra xem công thức 42 có tồn tại hay không; bản thân /recipes/42 sau đó sẽ trả về 404.

Tự làm thử

import { escapeHtml } from './html.js';
import express from 'express';
import { recipes } from './data.js';

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
    const items = recipes.map((r) => `<li><a href="/recipes/${r.id}">${escapeHtml(r.title)}</a></li>`);
    res.send(`<link rel="stylesheet" href="/style.css"><h1>Recipe Box</h1><ul>${items.join('')}</ul>`);
});

// type('text') gửi văn bản thuần túy, nên mỗi tiêu đề hiển thị trên một dòng riêng.
app.get('/recipes', (req, res) => {
    const { tag } = req.query;
    const list = tag ? recipes.filter((recipe) => recipe.tags.includes(tag)) : recipes;
    res.type('text').send(list.map((recipe) => recipe.title).join('\n'));
});

app.get('/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).send('No such recipe');
        return;
    }
    res.send(recipe.title);
});

app.get('/api/recipes', (req, res) => {
    res.json(recipes);
});

app.get('/api/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).json({ error: 'No such recipe' });
        return;
    }
    res.json(recipe);
});

app.get('/about', (req, res) => {
    res.send('Recipe Box collects family recipes.');
});

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