---
# System prepended metadata

title: "\U0001F3C5 Day 19 - Middleware"
tags: [Node.js 直播班 - 2023 春季班]

---

---
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) |

