# 🏅 Day 26 - Middleware
Express 在收到 request 到回傳 response，中間會經過一系列的 middleware（中間件/中介軟體）處理，middleware 本身像是一個守門員的概念，通常會使用 `app.use((req, res, next) => {...})` 並帶入 function，function 中除了 req 及 res 參數，還有 next，當執行 `next()` 就代表要將控制權交給下一個 Middleware
需注意若在 Middleware 最後沒有執行 `next()`，程式就會停留在這個 Middleware，無法進入下一個階段
```javascript=
app.use((req, res, next) => {
console.log('middleware');
next();
});
```
使用 `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 設計」
題目
---
嘗試使用 `app.use()` 設計一個處理錯誤路由以及一個伺服器程式錯誤的 Middleware，
- 處理錯誤路由：
當 client 端造訪錯誤的路由，就回傳狀態碼 404，並回傳 JSON 物件，status 為 `'error'`，回饋訊息 message 為`無此頁面資訊`
```
```
- 伺服器程式錯誤：
當 server 端有程式出錯的情況，導致 client 端無法正確造訪路由，就回傳狀態碼 500，並回傳 JSON 物件，status 為 `'error'`，回饋訊息 message 為 `系統錯誤，請恰系統管理員`
```
```
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
處理錯誤路由：
```
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](連結) |
-->
| Discord | CodePen ／ 答案 |
|:-------------:|:-----------------:|
| helena | [CodePen](https://codepen.io/helena27/pen/RNwWaJw) |
|janetlai|[CodePen](https://codepen.io/eiddkqxz-the-builder/pen/azbvZLo?editors=1010)
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/xbxwEGE?editors=0010) |
| Tau | [CodePen](https://codepen.io/Tau-Hsu/pen/NPWGdXM?editors=0010) |
| adengg | [CodePen](https://codepen.io/Osases/pen/mydemzJ?editors=0012) |
| sui_hsilan | [CodePen](https://codepen.io/suihsilan/pen/ZYEbjym?editors=0010) |
| bian_yang_mofa | [CodePen](https://codepen.io/cssf998811/pen/yyLYRag?editors=0010) |
| JC | [CodePen](https://codepen.io/lifetimingwhisper/pen/azbdWmV) |
|ZoeKang|[CodePen](https://codepen.io/byehywmx-the-animator/pen/ByajxqG?editors=0010)
|hananhpun|[CodePen](https://codepen.io/hannahpun/pen/PwoZrmz)
|daffytseng|[Codepen](https://codepen.io/Daffy-Tseng/pen/WbNwOXO) |
|sian|[Codepen](https://codepen.io/uxitysjl-the-flexboxer/pen/vEYKYEP?editors=0010) |
|HarryKuo|[CodePen](https://codepen.io/harry_kuo/pen/VYwmWbd?editors=0010)|
|li wei-min|[CodePen](https://codepen.io/leewayne/pen/ogNwexw?editors=0110)|
| hsin yu|[CodePen](https://codepen.io/tina2793778/pen/bNGRoJq)|
|wuyuli_21403|[CodePen](https://codepen.io/Job-Wilhelm/pen/QwWgPqR)|
|shiang|[CodePen](https://codepen.io/shiang29/pen/MYWQXaz?editors=0010)|
Sign in with Wallet
Connect another wallet