Node.js 使用 Express-Jwt和JsonWebToken 進行Token身份驗證的操作方法
更新時間：2024年08月19日 11:36:24 作者：秋窗7
這篇文章主要介紹了Node.js 使用 Express-Jwt和JsonWebToken 進行Token身份驗證的操作方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
前言
本文將實現(xiàn)在Node.js中使用Express-Jwt和JsonWebToken進行身份驗證
代碼
假設一個這樣的用戶登錄場景，用戶在成功登錄之后，前端會向后端請求用戶信息，并將用戶信息渲染到頁面上。
不使用token
web
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入axios -->
<script src="https://cdn.staticfile.net/axios/1.6.5/axios.js" crossorigin="anonymous"></script>
<span>用戶信息</span>
<button>獲取用戶名</button>
<script>
document.querySelector('button').onclick = function(){
axios.get('http:///127.0.0.1/getName').then(
function(response){
console.log(response);
document.querySelector('span').innerHTML = response.data
},
function(err){
console.log(err);
}
)
}
</script>
</body>
</html>這是一段非常簡單的代碼，點擊按鈕向后端請求用戶信息，并將其渲染到頁面上
server
/* 導入第三方庫 */
const express = require('express')
const cors = require('cors')//解決跨域問題
/* 創(chuàng)建實例 */
const user = {
username: 'qiuchuang',
password: 123456
}
const app = express()
const router = express.Router()
/* 路由處理函數(shù) */
router.get('/getName',(req,res)=>{
res.send(user.username)
})
/* 注冊中間件 */
app.use(cors())
app.use(router)
/* 注冊根路由 */
app.use('/', (req, res) => {
res.send('ok')
})
/* 啟動服務器 */
app.listen('80', () => {
console.log('server is running at http://127.0.0.1');
})這是后端代碼，創(chuàng)建了一個router路由處理函數(shù)，響應前端請求，有一定基礎的讀者看起來應該不難理解
接下來，我們將代碼升級一下，前端不能再直接從服務器中請求數(shù)據(jù)，而需要使用token認證才能獲取到用戶信息
使用token
web
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入axios -->
<script src="https://cdn.staticfile.net/axios/1.6.5/axios.js" crossorigin="anonymous"></script>
<span>用戶信息</span>
<button>獲取用戶名</button>
<script>
window.onload = function(){
axios.get('http://127.0.0.1/getToken').then(
function(response){
console.log(response);
},
function(err){
console.log(err);
}
)
}
document.querySelector('button').onclick = function(){
axios.get('http://127.0.0.1/getName',{
headers:{
'Authorization':`${localStorage.getItem('userToken')}`
}
}).then(
function(response){
console.log(response);
document.querySelector('span').innerHTML = response.data
},
function(err){
console.log(err);
}
)
}
</script>
</body>
</html>這段前端代碼不難理解，簡單解釋一下就是在頁面加載的時候向服務器端請求token，該token中包含了用戶基本信息，待頁面加載完成后，點擊按鈕，可以向服務器端請求用戶信息，并將用戶信息渲染到頁面上。
值得注意的是，在請求用戶信息的時候，必須在請求頭中包含服務器發(fā)送的token才能有權限獲取用戶信息
后端代碼
重點講講后端代碼
/* 導入第三方庫 */
const express = require('express')
const cors = require('cors')//解決跨域問題
const jwt = require('jsonwebtoken')//生成token
const expressJwt = require('express-jwt')//驗證tokne
/* 創(chuàng)建實例 */
const app = express()
const router = express.Router()
const user = {
username: 'qiuchuang',
password: 123456
}
const config = {
jwtScrectKey: 'qiuchuang No1 ^-^',//加密密鑰
expiresIn: '10h'//有效時間
}
router.get('/getToken', (req, res) => {
/*生成token */
const token = jwt.sign(user,config.jwtScrectKey,{expiresIn:config.expiresIn})//將token信息掛在到user對象中
res.send(token)
})
router.get('/getName',(req,res)=>{
res.send(req.user.username)
})
/* 注冊中間件 */
app.use(cors())
app.use(expressJwt({secret:config.jwtScrectKey}))
app.use(router)
/* 注冊根路由 */
app.use('/', (req, res) => {
res.send('ok')
})
/* 捕獲全局錯誤的中間件 */
app.use((err, req, res, next) => {
if (err.name === 'UnauthorizedError') {
return res.send('身份認證失敗')
}
res.send(err)
})
app.listen('80', () => {
console.log('server is running at http://127.0.0.1');
})讓我們看看增添了哪些代碼，
1.導入token相關的模塊
const jwt = require('jsonwebtoken')//生成token
const expressJwt = require('express-jwt')//驗證tokne2.配置對象
const config = {
jwtScrectKey: 'qiuchuang No1 ^-^',//加密密鑰
expiresIn: '10h'//有效時間
}3.響應token的路由處理函數(shù)
router.get('/getToken', (req, res) => {
/*生成token */
const token = jwt.sign(user,config.jwtScrectKey,{expiresIn:config.expiresIn})//將token信息掛在到user對象中
res.send(token)
})4.注冊驗證token的中間件
app.use(expressJwt({secret:config.jwtScrectKey}))5.處理錯誤的中間件
/* 捕獲全局錯誤的中間件 */
app.use((err, req, res, next) => {
if (err.name === 'UnauthorizedError') {
return res.send('身份認證失敗')
}
res.send(err)
})6.一處改動
res.send(user.username)
改為
res.send(req.user.username)
由于將token信息掛載到了user對象上，req多出了一個user屬性，使用這個user屬性可以根據(jù)客戶端發(fā)送的token而解析出對應的信息，也就實現(xiàn)了我們的目的-----用token進行身份認證
對比兩處代碼，相信讀者可以比較好地知道怎么實現(xiàn)基本的token身份認證，后續(xù)的代碼升級讀者也可以以此為基本，實現(xiàn)高級的功能。
到此這篇關于Node.js 使用 Express-Jwt和JsonWebToken 進行Token身份驗證的文章就介紹到這了,更多相關Node.js Token身份驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了node.js中的emitter.on方法使用說明,本文介紹了emitter.on的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
這篇文章主要為大家介紹了ChatGPT編程秀之最小元素的設計示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了Express定制路由,結合實例形式分析了express框架定制路由原理、用法及相關注意事項,需要的朋友可以參考下2023-05-05
Mongoose經(jīng)常返回e11000 error的原因分析
這篇文章主要給大家分析了Mongoose經(jīng)常返回e11000 error的原因，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友可以們下面來一起看看吧。2017-03-03
Node.js服務器環(huán)境下使用Mock.js攔截AJAX請求的教程
Mock.js這個JavaScript庫最常見的用法便是被用來攔截AJAX請求,well,這里我們就來看一下Node.js服務器環(huán)境下使用Mock.js攔截AJAX請求的教程:2016-05-05
這篇文章介紹了安裝Node.js并創(chuàng)建Web程序的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
本篇文章主要介紹了NodeJS實現(xiàn)圖片上傳代碼(Express) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了nodejs制作小爬蟲功能,結合實例形式分析了node.js安裝request、cheerio模塊及請求發(fā)送、數(shù)據(jù)庫操作等相關實現(xiàn)技巧,需要的朋友可以參考下2020-02-02
基于nodejs+express(4.x+)實現(xiàn)文件上傳功能
通過一段時間的查閱資料發(fā)現(xiàn)實現(xiàn)上傳的方式有：1.express中間件multer模塊2.connect-multiparty模塊（但現(xiàn)在 官方不推薦 ）3.使用multiparty模塊實現(xiàn)4.使用formidable插件實現(xiàn)，本文給大家介紹nodejs+express(4.x+)實現(xiàn)文件上傳功能，需要的朋友參考下2015-11-11
解決node報錯Error: Cannot find module http-e
這篇文章主要介紹了解決node報錯Error: Cannot find module http-errors的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-05-05