--- tags: Node.js 直播班 - 2023 春季班 --- # 🏅 Day 19 - 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 設計」 ## 題目(將答案寫在 HackMD 並提交至回報區) 嘗試使用 `app.use()` 設計一個處理錯誤路由以及一個伺服器程式錯誤的 Middleware, - 處理錯誤路由: 當 client 端造訪錯誤的路由,就回傳狀態碼 404,並回傳 JSON 物件,status 為 `'error'`,回饋訊息 message 為`無此頁面資訊` ``` ``` - 伺服器程式錯誤: 當 server 端有程式出錯的情況,導致 client 端無法正確造訪路由,就回傳狀態碼 500,並回傳 JSON 物件,status 為 `'error'`,回饋訊息 message 為 `系統錯誤,請恰系統管理員` ``` ``` ## 回報流程 將答案連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: ```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: '系統錯誤,請洽系統管理員' }); }); ``` --> 回報區 --- | 報數 | 組別/Discord 名字 | Codepen/HackMD/其他回饋 | |:----:|:-----------------------:|:-------------------------------------------------------------------------:| | 1 | 中 4 組 / jimkk159 | [HackMD - Day 19](https://hackmd.io/v0FdUE5JQGCJ_7sD3aD-Cw) | | 1 | 北 10 組 / Benson | [Github - Day 19](https://github.com/ioveasdkre/HexschoolOperation/tree/main/NodejsEnterpriseClass/day40-tasks/day19/app.ts) | | 3 | 北 12 組 / Sam Lin | [GitHub - Day 19](https://github.com/samlin1122/hex-school/blob/main/daily-challenges/day19.js) | 4 | 北 16 組 / 文文 | [codepen](https://codepen.io/chiawen81/pen/dygPBNm?editors=0010) | 5 | 北 13 組 / Louisa | [GitHub - Day 19](https://github.com/louisa0416/NodejsEnterpriseClass/tree/master/daily-task/day19) | | 6 | 南 1 組 / hiYifang | [HackMD - Day 19](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/ryrhdUASq) |