--- tags: Node.js 直播班 - 2022 春季班 --- # 🏅 Day 20 ## Middleware Express 在收到 request 到回傳 response，中間會經過一系列的 middleware（中間件/中介軟體）處理， middleware 本身像是一個守門員的概念，通常會使用 `app.use((req, res, next) => {...})` 並帶入 function，function 中除了 req 及 res 參數，還有 next，當執行 `next()` 就代表要將控制權交給下一個 Middleware 需注意若在 Middleware 最後沒有執行 `next()`，程式就會停留在這個 Middleware，無法進入下一個階段 使用 `app.use((req, res, next) => {...})` 的寫法在接收 request 時都會經過此 middleware，若是只想要在接收特定 request 時經過 middleware 把關，也可以改為此寫法 ```javascript const checkLogin = (req,res,next) => { const url = req.url; if(url !== '/'){ next() } else { res.send('你的登入資料有錯！') } } // 將 middleware 放在特定的路由中，只有接收到此 request 才會經過 checkLogin middleware app.get('/', checkLogin, function(req,res){ res.send('<html><head></head><body><h1>Login</h1></body></html>') }) ``` ### 參考資源 [使用 Express 中介軟體](https://expressjs.com/zh-tw/guide/using-middleware.html) [middleware 設計](https://courses.hexschool.com/courses/1670869/lectures/39299787)（章節影片） ### 題目（將答案寫在 HackMD 並提交至回報區） 嘗試使用 `app.use()` 設計一個處理錯誤路由以及一個伺服器程式錯誤的 Middleware， - 處理錯誤路由： 當 client 端造訪錯誤的路由，就回傳狀態碼 404，並回傳 JSON 物件，status 為 `'error'`，回饋訊息 message 為`無此頁面資訊` ``` ``` - 伺服器程式錯誤： 當 server 端有程式出錯的情況，導致 client 端無法正確造訪路由，就回傳狀態碼 500，並回傳 JSON 物件，status 為 `'error'`，回饋訊息 message 為 `系統錯誤，請恰系統管理員` ``` ``` 回報流程 --- 請同學依照下圖教學觀看解答、回報答案: ![](https://i.imgur.com/QtL8zEW.png) 回報格式：請在「回報區」貼上 CodePen 或 HackMD 連結回報答案 (為了統計人數，請同學依序加上「報數」) <!-- 解答 ```javascript app.use(function(req, res, next) { res.status(404).json({ status: 'error', message: "無此頁面資訊", }); }); app.use(function(req, res, next) { res.status(500).json({ status: 'error', message: '系統錯誤，請洽系統管理員' }); }); ``` --> 回報區 --- | 報數 | 組別 / 名字 | codepen / hackMD / 其他回饋 | | ---- | -------------------- | --------------------------------------------------------------------- | | 1 | 第二組 / Jin | [hackMD](https://hackmd.io/a8HBY5NHSnKm4UjNElt9oQ) | | 2 | 第 4 組 / 小宥 | [hackMD](https://hackmd.io/8BYM16aPQzG5Zjox0F1eew) | | 3 | 第 6 組 / Wendy | [hackMD](https://hackmd.io/@0k_MSPdgRPujozP6w_D-bA/ry-Il2lUq) | | 4 | 第 3 組 / HedgehogKU | [HackMD](https://hackmd.io/1xw9abntT1CsXiqcZOX9ew) | | 5 | 第 9 組 / 黃士桓 | [HackMD](https://hackmd.io/XIMZpAa7RDWYHnorTbIMqQ) | | 6 | 第 14 組｜East | [HackMD](https://hackmd.io/jV7Pw8HrSm6fbNfVZDXPKg) | | 7 | 第 6 組 / Ruta | [HackMD](https://hackmd.io/9gg7qdVbTpqm4tnHYgJzqQ) | | 8 | 第 3 組 / hiYifang | [HackMD](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/ryrhdUASq) | | 9 | 第 3 組 / Hobby | [HackMD](https://hackmd.io/@hobbyling/day20) | | 10 | 第 2 組 / joe | [HackMD](https://hackmd.io/uaRTw9c0TgOrADyXMmGL0Q?view#55-Middleware) | | 11 | 第 3 組 / Justin | [HackMD](https://hackmd.io/kCX893OxRJa30qZRcQCywg) | | 12 | 第 4 組 / 苡安 | [HackMD](https://hackmd.io/UeVugdBsSRizGQbF7l-Sxg) | |13 |第 9 組 / konstante |[HackMD](https://hackmd.io/QAlQENxuS7aLmJtpukFdCA?both) | |14 |第 1 組 / Claire |[HackMD](https://hackmd.io/SfULLF5STtalTrP5tx0Q-Q)| | 15 | 第 2 組 / wendy.li | [HackMD](https://hackmd.io/C0pZk1quTAeM3t-7Tu4jwA)} | 16 | KFC | [HackMD](https://hackmd.io/T6qxhB7JT6W9tAtwRqhmEw?view)| | 17 | 第 2 組 / Hank | [HackMD](https://hackmd.io/@hank-hsiao/SyN17uZ8q)| | 18 | 第 11 組 / Han Lai | [HackMD](https://hackmd.io/3GJO0zSkSlaRae4UQF13yw?view)| |19|第8組/Jordan Tseng|[HackMD](https://hackmd.io/Yp0a--8xRwW9LAezQaam-A?both) | 20 | 第 5 組 / Hazel | [HackMD@Hazel](https://hackmd.io/@hazelwu/day20)| | 21 | 第 15 組 / Chiu | [HackMD](https://hackmd.io/5aejXEtSQcy5pyaJaOg0Hg)| | 22 | 第 1 組 / Ed Huang | [HackMD](https://hackmd.io/A03WlCIGRnSOZaoe2KOH9g?view)| | 23 | 第 2 組 / Rikkubook | [HackMD](https://hackmd.io/IVJw2cB7Sm629gejnBglSg)| | 24 | 第 11 組 / mandy | [HackMD](https://hackmd.io/eFmOSrpRSFKwzW97gQ02LQ?view)| | 25 | 第 2 組 / peter | [HackMD](https://hackmd.io/@peterchen1024/r1Q_wYIU5)| | 26 | 第 10 組 / Otis | [HackMD](https://hackmd.io/mhU5hOLJQ-Ou9Z5s7CDWiQ?view)| | 27 | 第 3 組 / 小葉 | [HackMD](https://hackmd.io/@FyKv37KcRSWqAO_e336w8g/Syxemuywc)| | 28 | 第 12 組 / Jimmy | [HackMD](https://hackmd.io/I_aVMaA6RYuXus7bOLbQEw)| | 29 | 第 16 組 / 皓皓 | [HackMD](https://hackmd.io/@cutecat8110/SkcICp2P9)| | 30 | 第 15 組 / yolala | [HackMD](https://hackmd.io/2FAZs90IRM6bPHprZT30mw)|