利用cookie達成頁面跳轉提示

狀況

在餐廳清單這項專案時我曾向在新增一間餐廳資料或是修改餐廳資料跳回首頁時跳出一段訊息提醒使用者操作成功。

第一次出手與失敗

在餐廳這項專案中這項功能是沒有實現的，當我上網搜尋資料可能是我下的關鍵字不夠精準，所以都沒有找到相關的資料，我也曾打開AC lighthouse的網頁原始碼想要知道它是如何實現在登入後顯示訊息，但可惜我功力不夠看不出個所以然。

定義問題

既然找不到相關參考資料，那就只能從手上現有的線索中拼拼看，再回頭看一次想要達成的功能"跳轉的頁面的同時在跳轉的目的顯示一段訊息"，所以這項功能其實要做到兩件事，一、頁面的跳轉，二、將一段訊息傳入目標頁面。

尋找

定義了問題接下來就看看手上的已知，跳轉頁面用的就是express中的redirect()，而傳入資料給畫面用的就是express中的render()，於是我就開始翻官方文件想找找有沒有辦法在redirect的時候一起傳出一段message，到目標位置取出message在放入render中，但翻了翻都沒找到相關資料。

撥雲見月

因為這項功能不是專案必要，考慮到時間因素就先擱著，然後到了選修中要製作簡易登入系統提到了cookie的概念，我突然想到cookie既然可以記錄登入狀態，那同樣的也可以記錄一筆訊息吧，因為這兩樣事本質上都是在記錄一筆資料，

於是我馬上就來測試了一下最後的結果如下:

router.get("/", (req, res) => {

const message = req.cookies.message;

//當message 不為空值時便會渲染中message中的訊息

res.render("login", { message });

//顯示完後清空message，避免重複顯示

res.clearCookie("message");

});

router.post("/", (req, res) => {

const { email, password } = req.body;

const user = User.find((user) => email === user.email);

if (user) {

if (user.password === password) {

res.cookie("login", "true");

res.cookie("firstName", user.firstName);

res.redirect("/auth/profile");

} else {

//將需要顯示的訊息寫入cookie

res.cookie("message", "email of password is wrong");

res.redirect("/");

}

});