--- tags: Node.js 直播班 - 2022 春季班 --- # 🏅 Day 31 ## JWT 驗證 middleware ### 題目(將答案寫在 HackMD 並提交至回報區) 1. 延續前一天的每日任務,isAuth middleware 第 3 行的固定 token 改寫為: 接收 `req.headers.authorization`,驗證 `req.headers.authorization` 是否存在,以及是否為 `Bearer` 開頭 若符合此條件則取出 JWT 字串,若未成功取得 JWT,表示使用者可能尚未登入,需回傳 401 錯誤 ```javascript= // isAuth middleware const isAuth = handleErrorAsync(async (req, res, next) => { let token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYyN2IxNTlhMDlhZmMwZTU4NzZiNTE5MSIsImlhdCI6MTY1MjIzMzkwMCwiZXhwIjoxNjYwMDA5OTAwfQ.07q6Ib5tSZ1CYJLg-SaGIdGUnuyDaHY6wX9NnuM23io' // 測試用 JWT // 驗證 token 正確性 const decoded = await new Promise((resolve,reject)=>{ jwt.verify(token,process.env.JWT_SECRET,(err,payload)=>{ if(err){ reject(err) } else{ resolve(payload) } }) }) const currentUser = await User.findById(decoded.id); req.user = currentUser; next(); }); ``` 2. 設計[取得個人資料](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/screen/112f9990-41f0-4c0d-8704-67279a52a49c/)路由 GET `/users/profile`,加入 isAuth middleware,當 request 帶上的 token 驗證通過,就將取出的 user 資料回傳給 client 回報流程 --- 請同學依照下圖教學觀看解答、回報答案: ![](https://i.imgur.com/QtL8zEW.png) 回報格式:請在「回報區」貼上 CodePen 或 HackMD 連結回報答案 (為了統計人數,請同學依序加上「報數」) <!-- 解答 範例參考 https://github.com/gonsakon/express-week4-sample/blob/week6/service/auth.js https://github.com/gonsakon/express-week4-sample/blob/week6/routes/users.js#L53-L59 ```javascript // isAuth middleware const isAuth = handleErrorAsync(async (req, res, next) => { // 確認 token 是否存在 let token; if ( req.headers.authorization && req.headers.authorization.startsWith('Bearer') ) { token = req.headers.authorization.split(' ')[1]; } if (!token) { return next(appError(401,'你尚未登入!',next)); } // 驗證 token 正確性 const decoded = await new Promise((resolve,reject)=>{ jwt.verify(token,process.env.JWT_SECRET,(err,payload)=>{ if(err){ reject(err) }else{ resolve(payload) } }) }) const currentUser = await User.findById(decoded.id); req.user = currentUser; next(); }); ------------------------ // routes/users.js router.get('/profile',isAuth, handleErrorAsync(async(req, res, next) =>{ res.status(200).json({ status: 'success', user: req.user }); })) ``` --> 回報區 --- | 報數 | 組別 / 名字 | codepen / hackMD / 其他回饋 | | ---- | ----------------- | ------------------------------------------------------- | | 1 | 第 9 組 / 黃士桓 | [HackMD](https://hackmd.io/MTCQbqovR-etuEWRJa6b5w) | | 2 | 第 5 組 @ Hazel | [HackMD@Hazel](https://hackmd.io/@hazelwu/day31) | | 3 | 第 14 組|East | [HackMD](https://hackmd.io/xIlQJVvnRXGy79qvVUBB3w) | | 4 | 第 11 組|Han Lai | [HackMD](https://hackmd.io/ghxn7a7XT5-fBbeMtjfVEg) | | 5 | 第 4 組|苡安 | [HackMD](https://hackmd.io/d30Hvb1uSGaYRUiItwcSYA?both) | | 6 | 第 9 組 / konstante | [HackMD](https://hackmd.io/4JJSN0hcSUW9y1rBiAF4lQ?edit) | | 7 | 第 3 組 / Hobby | [HackMD](https://hackmd.io/@hobbyling/day31) | | 8 | 第 4 組 / 小宥 | [HackMD](https://hackmd.io/Tzol2P40RluGsIaobNMNTw) | | 9 | 第 12 組 / Jimmy | [HackMD](https://hackmd.io/1jhMRDxGTQ-WbIiHomRplA) | |10 | 第2組 / wendy | [HackMD](https://hackmd.io/80FIwll1QUa4u0-WoBv-hQ#20220520)| |11 | 第16組 / 皓皓 | [HackMD](https://hackmd.io/@cutecat8110/HyEp29055)|