欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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')//驗證tokne

2.配置對象

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身份驗證內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • NodeJS配置HTTPS服務實例分享

    NodeJS配置HTTPS服務實例分享

    本文給大家分享的是在nodejs中配置https服務的方法和具體的示例，非常的詳細，有需要的小伙伴可以來參考下
    2017-02-02
  • nodejs基礎之常用工具模塊util用法分析

    nodejs基礎之常用工具模塊util用法分析

    這篇文章主要介紹了nodejs基礎之常用工具模塊util用法,結合實例形式分析了nodejs核心工具模塊util功能、相關函數(shù)與使用方法,需要的朋友可以參考下
    2018-12-12
  • 關于訪問node?express中的static靜態(tài)文件方法

    關于訪問node?express中的static靜態(tài)文件方法

    這篇文章主要介紹了關于訪問node?express中的static靜態(tài)文件方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • Node.js全局對象Global的實現(xiàn)

    Node.js全局對象Global的實現(xiàn)

    在Nodejs下全局變量和全局函數(shù)都是可以使用global來訪問到的,本文主要介紹了Node.js全局對象Global的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
    2023-12-12
  • 如何用Node寫頁面爬蟲的工具集

    如何用Node寫頁面爬蟲的工具集

    這篇文章主要介紹了如何用Node寫頁面爬蟲的工具集，主要介紹了三種方法，分別是Puppeteer、cheerio和Auto.js，感興趣的小伙伴們可以參考一下
    2018-10-10
  • Node.js中npx命令的使用方法及場景分析

    Node.js中npx命令的使用方法及場景分析

    NPM(Node Package Manager) 是Node.js提供的一個包管理器, 可以使用 NPM 來安裝 node.js 包 ，npm 是從5.2版開始, 增加(自帶)了 npx 命令，本文給大家分享Node.js npx命令使用，需要的朋友一起看看吧
    2021-08-08
  • Nodejs?Docker鏡像體積優(yōu)化實踐詳解

    Nodejs?Docker鏡像體積優(yōu)化實踐詳解

    這篇文章主要為大家介紹了Nodejs?Docker鏡像體積優(yōu)化實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-07-07
  • Nodejs使用SQL模糊查詢的過程詳解

    Nodejs使用SQL模糊查詢的過程詳解

    最近在改一個比較久的項目,是使用nodejs寫的,但是對于長期寫java的后端開發(fā)來說,還是有點難維護,不過不改bug的話,就需要重新開發(fā),所以本文介紹了NodeJs如何使用SQL模糊查詢,需要的朋友可以參考下
    2024-07-07
  • Node.js中的HTTP?Server對象與GET、POST請求

    Node.js中的HTTP?Server對象與GET、POST請求

    這篇文章介紹了Node.js中的HTTP?Server對象與GET、POST請求，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-07-07
  • npm install常見錯誤類型及對應的解決方案

    npm install常見錯誤類型及對應的解決方案

    在前端開發(fā)中,npm是最常用的包管理工具,通過 npm install 命令,開發(fā)者可以輕松地安裝項目所需的依賴包,然而,在實際使用過程中,npm install 可能會因為各種原因而報錯,本文將詳細介紹一些常見的 npm install 錯誤類型、發(fā)生原因及其對應的解決方案,需要的朋友可以參考下
    2025-03-03

最新評論