登錄標識
系統(tǒng)通常只有登錄成功后才能訪問，而 http 是無狀態(tài)的。倘若直接請求需要登錄才可訪問的接口，假如后端反復查詢數(shù)據(jù)庫，而且每個請求還得帶上用戶名和密碼，這都是不很好。
作為前端，我們聽過 cookie(session) 和 token，他們都是登錄標識，各有特色，本篇都將完整實現(xiàn)。
Tip：在上文（起步篇）基礎上進行
cookie 和 session
express-session
express-session —— 用于 Express 中使用 session，對于前端是無感知的，因為 cookie 會自動發(fā)送給后端。
安裝 express-session 包：
PS E:\pjl-back-end> npm install express-session
added 6 packages, and audited 85 packages in 9s
2 packages are looking for funding
run `npm fund` for details
4 vulnerabilities (3 high, 1 critical)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
代碼
app.js
app.js 中注冊 session，以及設置攔截器。
$ git diff app.js
+// session
+var session = require('express-session')
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
const UserRouter = require('./routes/UserRouter')
// 跨域代碼省略...
// 使用跨域中間件
app.use(allowCors);
+// 注冊 session 中間件
+app.use(session({
+ // sessionId 的名字。The name of the session ID cookie to set in the response
+ name: 'pjl-system',
+ // 秘鑰
+ secret: 'pjl-system-demo',
+ cookie: {
+ maxAge: 1000*60, // 60秒過期
+ // true - 只有 https 才能訪問 cookie
+ secure: false
+ },
+ // true - 初始就給到 cookie。例如沒有登錄，直接點擊“獲取用戶列表”，也會給到 cookie
+ saveUninitialized: true,
+}))
// 放開靜態(tài)資源
app.use(express.static(path.join(__dirname, 'public')));
+// 請求攔截器
+app.use(function(req, res, next) {
+ // 如果是登錄或注銷，則放行
+ if(req.url.includes('login')){
+ next()
+ // 否則還會執(zhí)行
+ return
+ }
+
+ // 登錄 并且 session 有效
+ if(req.session.user){
+ // 只要來請求，就更新過期時間
+ req.session.date = Date.now()
+ next()
+ }else{
+ // session 失效，返回 401，通知“請重新登錄”
+ res.status(401).json({code: '-1', msg: '請重新登錄'})
+ }
+});
app.use('/', indexRouter);
Tip：更新過期時間重新設置 session，例如這里的 req.session.date = Date.now()。任意自定義屬性都可以，只要標識 session 有改變即可
UserRouter.js
增加3個接口：登錄、注銷、用戶列表。
$ git diff routes/UserRouter.js
var express = require('express');
var router = express.Router();
const UserController = require('../controllers/UserController.js')
+// 登錄
+router.post('/user/login', UserController.login);
+// 注銷
+router.get('/user/loginout', UserController.loginOut);
+// 用戶列表
+router.get('/user/list', UserController.userList);
UserController.js
實現(xiàn)3個接口。登錄后設置 session，注銷后銷毀 session。
$ git diff controllers/UserController.js
const UserController = {
error: '用戶名密碼不匹配'
})
}else{
+ // 登錄成功
+ /*
+ result[0] {
+ _id: new ObjectId("6441f499113fbc9501443c70"),
+ username: 'pjl',
+ password: '123456'
+ }
+ */
+ console.log('result[0]', result[0])
+ // 刪除密碼
+ delete result[0].password
+ // 設置 session。好比給 session 這個房子里放點東西
+ req.session.user = result[0]
res.send({
code: '0',
error: ''
})
}
- }
+ },
+ // 注銷
+ loginOut: async (req, res) => {
+ req.session.destroy(() => {
+ res.send({code: 0, msg: '注銷成功'})
+ })
+ },
+ // 用戶列表
+ userList: async (req, res) => {
+ var result = await UserService.userList()
+ if(result.length === 0){
+ res.send({
+ code: '-1',
+ msg: '用戶列表獲取失敗'
+ })
+ return
+ }
+
+ res.send({
+ code: '0',
+ data: {
+ rows: result,
+ },
+ msg: '用戶列表獲取成功'
+ })
+ },
}
UserService.js
實現(xiàn)用戶列表數(shù)據(jù)庫的查詢。
$ git diff services/UserService.js
const UserService = {
login: async ({username, password}) => {
return UserModel.find({
username,
password
})
},
+// 用戶列表
+userList: async () => {
+ return UserModel.find()
+}
}
校驗
后端
啟動后端服務，允許前端訪問新增的三個接口
PS E:\pjl-back-end> npm run start
> pjl-back-end@0.0.0 start
> nodemon ./bin/www
[nodemon] 2.0.22
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node ./bin/www`
express-session deprecated undefined resave option; provide resave option app.js:30:9
數(shù)據(jù)庫連接成功
Tip：筆者這里的環(huán)境需要啟動數(shù)據(jù)庫，以及允許跨域請求。
前端
筆者直接使用 amis-editor（amis 低代碼編輯器，更多了解請看這里）花費5分鐘繪制一個如下前端頁面：
Tip: 在線的 amis-editor 編輯器感覺有點慢，直接下載到本地啟動。筆者使用的是 chrome 109。firefox 報錯（不管）
測試
現(xiàn)在瀏覽器開發(fā)工具查看cookie是空的
筆者故意輸錯密碼，點擊登錄，返回{"code":"-1","error":"用戶名密碼不匹配"}。雖然登錄失敗，但 cookie 也會有值（saveUninitialized: true, 的作用，如果為 false 則需要登錄成功后 cookie 才有值）。
// Genaral
Request URL: http://localhost:3000/user/login
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:3000
Referrer Policy: strict-origin-when-cross-origin
// Response
{"code":"-1","error":"用戶名密碼不匹配"}
用戶列表需要登錄后才能獲取，現(xiàn)在沒有登錄，點擊獲取用戶列表，返回 401。前端可以根據(jù)這個返回做路由跳轉至登錄頁。
輸入正確的密碼，登錄成功
再次點擊獲取用戶列表，返回用戶列表信息：
// Genaral
Request URL: http://localhost:3000/user/list
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:3000
Referrer Policy: strict-origin-when-cross-origin
// Response Headers
Set-Cookie: pjl-system=s%3AuMMniH85GEC5T1c5vW5BXH0mlDlt91RT.AL7IEIrnkw5mh%2FFjARknIkWziJNWSjgSe37u5LtSLek; Path=/; Expires=Tue, 25 Apr 2023 06:27:25 GMT; HttpOnly
// Request Headers
// 自動發(fā)出 cookie，容易引起安全問題
Cookie: pjl-system=s%3AuMMniH85GEC5T1c5vW5BXH0mlDlt91RT.AL7IEIrnkw5mh%2FFjARknIkWziJNWSjgSe37u5LtSLek
// Response
{"code":"0","data":{"rows":[{"_id":"6441f499113fbc9501443c70","username":"pjl","password":"123456"}]},"msg":"用戶列表獲取成功"}
Tip: 這里也說明 cookie 會自動發(fā)出去
而且過期時間也從 27:03 推遲到 27:25，說明只要用戶操作了，session 的過期時間就會更新。比如筆者這里設置 1 分鐘，只要在這個時間內(nèi)不停的與后端交互，session 就不會過期。
Tip：限制訪問 Cookie 有 Secure 屬性和 HttpOnly 屬性。這里的是 HttpOnly，所以通過瀏覽器控制臺 document.cookie 返回空。
點擊注銷，再次獲取用戶列表，則報 401。
connect-mongo
目前有個問題：登錄后，能請求到用戶列表，只要保存后端，服務就會重啟，再次請求用戶列表就報 401，因為現(xiàn)在 session 存在內(nèi)存中，重啟服務內(nèi)存中的數(shù)據(jù)就清空了。
...
[nodemon] restarting due to changes...
[nodemon] starting `node ./bin/www`
express-session deprecated undefined resave option; provide resave option app.js:32:9
數(shù)據(jù)庫連接成功
我們可以借助 connect-mongo 將 session 存入mongo 數(shù)據(jù)庫中。
用法很簡單，首先安裝包，然后配置如下即可：
PS E:\pjl-back-end> npm i connect-mongo
added 7 packages, and audited 92 packages in 12s
2 packages are looking for funding
run `npm fund` for details
4 vulnerabilities (3 high, 1 critical)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
$ git diff app.js
// session
var session = require('express-session')
+// 將session 存入 mongo
+var MongoStore = require('connect-mongo')
app.use(session({
saveUninitialized: true,
+ store: MongoStore.create({
+ mongoUrl: 'mongodb://192.168.1.123:27017/pjl_session_db',
+ // 默認情況下，connect-mongo使用MongoDB的TTL收集功能（2.2+）讓mongodb自動刪除過期的會話
+ ttl: 1000 * 60
+ })
}))
重啟后端服務，進入 mongo shell 發(fā)現(xiàn) pjl_session_db 數(shù)據(jù)庫被自動創(chuàng)建：
> show dbs
admin 0.000GB
config 0.000GB
local 0.000GB
pjl_db 0.000GB
pjl_session_db 0.000GB
目前里面有一張 sessions 的空表：
> use pjl_session_db
switched to db pjl_session_db
> db.getCollectionNames()
[ "sessions" ]
> db.session.find()
>
Tip: 為方便測試，筆者將過期時間（和 ttl）設置成 10 秒。并設置 saveUninitialized:false
輸入正確的用戶名和密碼，登錄成功，保存后端讓服務重啟，直接點擊獲取用戶信息，用戶信息正常返回，說明session不在保存在內(nèi)存中。繼續(xù)不停的點擊獲取用戶信息時，通過瀏覽器開發(fā)模式發(fā)現(xiàn) cookie 過期時間也在不停的更新。
此刻 sessions 表中有一條數(shù)據(jù)：
> db.sessions.find()
{ "_id" : "Y0rWLhjaDSB6eDwjIcsoF91AmJDYm9mn", "expires" : ISODate("2023-04-25T08:13:52.597Z"), "session" : "{\"cookie\":{\"originalMaxAge\":10000,\"expires\":\"2023-04-25T08:13:52.597Z\",\"secure\":false,\"httpOnly\":true,\"path\":\"/\"},\"user\":{\"_id\":\"6441f499113fbc9501443c70\",\"username\":\"pjl\",\"password\":\"123456\"},\"date\":1682410422595}" }
// 點擊注銷后執(zhí)行
> db.sessions.find()
>
點擊 注銷 后發(fā)現(xiàn) sessions 又為空了。
再次登錄后，等待過期，雖然筆者設置的 ttl 是 10 秒，但是筆者在 34 秒查詢還有該條數(shù)據(jù)，38 秒時清空了 —— 說明 數(shù)據(jù)庫 ttl 自動清除 session 生效，但時間不一定是我們設置的。暫未深入研究。
JSON Web Token
在react 高效高質量搭建后臺系統(tǒng) 系列 —— 登錄中我們使用了 Token。
Token 使用的大致流程：輸入用戶名、密碼，登錄成功后，后端返回數(shù)據(jù)中包含 token（即后端分配給用戶的一個登錄標識），前端將其保存在 localStorage 中，后續(xù)前端所有的請求都將會帶上這個標識（token），后端接受請求后，驗證 token 是否有效，有效則放行請求，如果無效（比如 token 過期、token 偽造），則返回 401 告訴前端“會話過期，請重新登錄”。
Token 是個什么東西，為什么可以用作登錄標識？ 請看 jsonwebtoken。
jsonwebtoken
安裝 jsonwebtoken（JSON Web Tokens 的實現(xiàn)）：
PS E:\pjl-back-end> npm i jsonwebtoken
added 10 packages, and audited 102 packages in 12s
2 packages are looking for funding
run `npm fund` for details
4 vulnerabilities (3 high, 1 critical)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
在 app.js 末尾添加如下代碼對 jsonwebtoken 進行初步體驗：
// test token
var jwt = require('jsonwebtoken')
// 秘鑰。隨便寫
var private_key = 'pjl-system-private-key'
// 數(shù)據(jù)。例如以后的系統(tǒng)登錄用戶名數(shù)據(jù)
var payload = {
id: 1,
username: 'pjl'
}
// 過期時間
var expire = '10s'
var token = jwt.sign(payload, private_key, { expiresIn: expire})
console.log('token', token)
// 驗證 token
var decoded = jwt.verify(token, private_key)
console.log('decoded', decoded)
// 過期后驗證
setTimeout(() => {
var decoded = jwt.verify(token, private_key)
console.log('過期后解碼decoded', decoded)
}, 11 * 1000)
啟動服務，控制臺輸出：
[nodemon] restarting due to changes...
[nodemon] starting `node ./bin/www`
// token
token eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJwamwiLCJpYXQiOjE2ODI0ODg4NzQsImV4cCI6MTY4MjQ4ODg4NH0.mk91VodC-nuUqjUwu2idqrgQDyy_sjASXSmH6g3Go3I
// decoded
decoded { id: 1, username: 'pjl', iat: 1682488874, exp: 1682488884 }
數(shù)據(jù)庫連接成功
// 11秒后再次驗證 token 報錯
E:\pjl-back-end\node_modules\jsonwebtoken\verify.js:40
if (err) throw err;
^
TokenExpiredError: jwt expired
at E:\pjl-back-end\node_modules\jsonwebtoken\verify.js:190:21
at getSecret (E:\pjl-back-end\node_modules\jsonwebtoken\verify.js:97:14)
at Object.module.exports [as verify] (E:\pjl-back-end\node_modules\jsonwebtoken\verify.js:101:10)
at Timeout._onTimeout (E:\pjl-back-end\app.js:131:21)
at listOnTimeout (node:internal/timers:559:17)
at processTimers (node:internal/timers:502:7) {
expiredAt: 2023-04-26T06:01:24.000Z
}
[nodemon] app crashed - waiting for file changes before starting...
我們將 token 放入 jwt.io 能看到解碼后的信息：
jwt 通常是 xxx.yyy.zzz 的字符串。包含3部分：Header、Payload、Signature(簽名)。
驗證時，取出 token 的 Header和Payload，并配合秘鑰生成簽名，在對比 token 中的Signature，如果相同則說明驗證通過。
Tip：由于驗證失敗時會報錯，所以下文需要對 jwt 進行封裝
代碼
jwt.js
對 token 封裝，導出生成 token 和校驗 token 的方法。
// jwt.js
// test token
const jwt = require('jsonwebtoken')
// 秘鑰。隨便寫
const private_key = 'pjl-system-private-key'
const JWT = {
// 生成 token
generate(payload, expire){
return jwt.sign(payload, private_key, { expiresIn: expire})
},
// 驗證 token
verify(token){
// 驗證失敗會報錯，所以需要 try...catch
try{
return jwt.verify(token, private_key)
}catch(e){
return false
}
}
}
module.exports = JWT
UserController.js
登錄時將 token 設置給 request 的頭部，客戶端將 token 保存，下次請求則再次攜帶 X-Token：
$ git diff controllers/UserController.js
const UserModel = require('../models/UserModel')
+const JWT = require('../libs/jwt')
const UserController = {
login: async (req, res) => {
// req.body - 例如 {"username":"pjl","password":"123456"}
const UserController = {
+ // payload 必須是 plain object，所以不能直接寫 result[0]
+ const payload = {
+ _id: result[0]._id,
+ username: result[0].username
+ }
+ let token = JWT.generate(payload, '1h')
+ res.header('X-Token', token)
res.send({
code: '0',
error: ''
app.js
如果是 login 的請求則放行。其他請求如果沒有 token 則返回 401，有 token 則校驗是否有效，有效則生成新的 token。
$ git diff app.js
+var JWT = require('./libs/jwt')
// 跨域參考：https://blog.csdn.net/gdutRex/article/details/103636581
var allowCors = function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost');
- res.header('Access-Control-Allow-Headers', 'Content-Type,lang,sfopenreferer ');
+ // 增加 X-Token，否則報錯：
+ res.header('Access-Control-Allow-Headers', 'Content-Type,lang,sfopenreferer,X-Token');
res.header('Access-Control-Allow-Credentials', 'true');
- next();
+ // 預檢。參考：https://troyyang.com/2017/06/06/Express_Cors_Preflight_Request/
+ if (req.method == "OPTIONS") {
+ res.send(200);
+ }
+ else {
+ next();
+ }
};
+app.use(function(req, res, next) {
+ // 如果是登錄則放行
+ if(req.url.includes('login')){
+ next()
+ // 否則還會執(zhí)行
+ return
+ }
+
+ // console.log('req.headers', req.headers)
+ // X-Token 接收的是小寫 x-token
+ const token = req.headers[('X-Token').toLowerCase()]
+ const payload = JWT.verify(token)
+ console.log('token', token)
+ // // 存在 token 并校驗成功則通過，否則401
+ if(token && payload){
+ const newPayload = {
+ _id: payload._id,
+ username: payload.username
+ }
+ console.log('newPayload', newPayload)
+ // 直接用 payload 瀏覽器控制臺報錯：Bad "options.expiresIn" option the payload already has an "exp" property.
+ const newToken = JWT.generate(newPayload, '10s')
+ // console.log('newToken', newToken)
+ res.header('X-Token', newToken)
+ next()
+ }else{
+ res.status(401).json({code: '-1', msg: '請重新登錄'})
+ }
+});
Tip：其中筆者環(huán)境涉及跨域，通過添加 X-Token 和 OPTIONS 的代碼用于解決如下兩個問題：
// 已被 CORS 策略阻止：預檢響應中的訪問控制允許標頭不允許請求標頭字段 x 令牌
index.html#/edit/2:1 Access to XMLHttpRequest at 'http://localhost:3000/user/list' from origin 'http://localhost' has been blocked by CORS policy: Request header field x-token is not allowed by Access-Control-Allow-Headers in preflight response.
// 已被 CORS 策略阻止：對預檢請求的響應未通過訪問控制檢查：它沒有 HTTP 正常狀態(tài)。
index.html#/edit/2:1 Access to XMLHttpRequest at 'http://localhost:3000/user/list' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
測試
筆者仍舊在 amis-editor 中進行，首先登陸，請求返回 X-Token，給獲取用戶列表增加 X-Token，服務端正常接收，并設置新的 X-Token 給前端
"api": {
"url": "http://localhost:3000/user/list",
"method": "get",
"headers": {
"X-Token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NDQxZjQ5OTExM2ZiYzk1MDE0NDNjNzAiLCJ1c2VybmFtZSI6InBqbCIsImlhdCI6MTY4MjQ5NDM2MCwiZXhwIjoxNjgyNDk3OTYwfQ.fuA9FiqnE15i6YEicGZVdzhzIkNpZhkPzGvWVQZ7qdY"
}
}
// 第二次請求“用戶列表”，返回新的 Token
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NDQxZjQ5OTExM2ZiYzk1MDE0NDNjNzAiLCJ1c2VybmFtZSI6InBqbCIsImlhdCI6MTY4MjQ5NTUwNiwiZXhwIjoxNjgyNDk1NTE2fQ.mtg9l9-hh33HHFX8PwKRrerUs61JxHbdRY3jwLTZVbI
Session Vs Token
session 的流程：用戶登錄，session 在服務端生成一個房間（房間放在數(shù)據(jù)庫中），并在房間中放點東西，接著把房間鑰匙（即 session Id）設置回 cookie，后續(xù)客戶端的所有請求都會自動帶上這個 cookie（鑰匙），服務端則會根據(jù)鑰匙去找房間，能找到房間則請求通過，否則告訴前端重新登錄
token 的流程：用戶登錄，服務器生成 token 并返回，前端將 token 存入 localStorage，后續(xù)所有請求手動將 token 傳回服務端，服務端通過秘鑰驗證 token，驗證成功則請求通過，否則告訴前端重新登錄
Session 特點
- 上文通過 express-session 實現(xiàn)登錄授權，對前端來說是無感知的
- cookie 會隨著 http 自動發(fā)送，容易引起安全問題
- Session 存在數(shù)據(jù)庫，如果用戶數(shù)過多，服務端開銷就會大
- 后端如果有集群，可能就得涉及多個 session 之間的同步。如果將多個 session 數(shù)據(jù)庫提取出一個公共服務，存在一個機器中，假如該服務宕機，所有用戶得重新登錄
Token 特點
- 占帶寬，每次請求都帶上 Token
- token 不會自動發(fā)送，得手動發(fā)送
- 無法在服務端注銷（可配合服務端實現(xiàn)注銷 token）
登錄標識 vs 權限
本篇的 token 和 session 僅僅是登錄標識，而非權限，筆者之前寫過 前端權限，而前端權限是不靠譜的，所以后端權限通常更重要。
比如直接通過發(fā)送一個請求給后端，后端就得查詢這個用戶（token、cookie都可以獲取用戶名等信息）的角色、權限，所以每個請求過來，都需要查詢數(shù)據(jù)庫。文章來源：http://www.zghlxwxcb.cn/news/detail-434358.html
Tip：更多請自行查閱 RABC 權限文章來源地址http://www.zghlxwxcb.cn/news/detail-434358.html
到了這里，關于Node + Express 后臺開發(fā) —— 登錄標識的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
