Node.js 使用 Express-Jwt和JsonWebToken 进行Token身份验证的操作方法

更新时间：2024年08月19日 11:36:24 作者：秋窗7

这篇文章主要介绍了Node.js 使用 Express-Jwt和JsonWebToken 进行Token身份验证的操作方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

前言

本文将实现在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')//解决跨域问题
/* 创建实例 */
const user = {
    username: 'qiuchuang',
    password: 123456
}
const app = express()
const router = express.Router()
/* 路由处理函数 */
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');
})

这是后端代码，创建了一个router路由处理函数，响应前端请求，有一定基础的读者看起来应该不难理解

接下来，我们将代码升级一下，前端不能再直接从服务器中请求数据，而需要使用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中包含了用户基本信息，待页面加载完成后，点击按钮，可以向服务器端请求用户信息，并将用户信息渲染到页面上。

值得注意的是，在请求用户信息的时候，必须在请求头中包含服务器发送的token才能有权限获取用户信息

后端代码

重点讲讲后端代码

/* 导入第三方库 */
const express = require('express')
const cors = require('cors')//解决跨域问题
const jwt = require('jsonwebtoken')//生成token
const expressJwt = require('express-jwt')//验证tokne
/* 创建实例 */
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的路由处理函数

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属性可以根据客户端发送的token而解析出对应的信息，也就实现了我们的目的-----用token进行身份认证

对比两处代码，相信读者可以比较好地知道怎么实现基本的token身份认证，后续的代码升级读者也可以以此为基本，实现高级的功能。

到此这篇关于Node.js 使用 Express-Jwt和JsonWebToken 进行Token身份验证的文章就介绍到这了,更多相关Node.js Token身份验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

node执行cmd或shell命令使用介绍
这篇文章主要为大家介绍了node执行cmd或shell命令的使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
基于node的tcp客户端和服务端的简单通信
通过Nodejs,我们可以快速地搭建一个简单的Web服务器,实现服务端与客户端的简单通信，本文主要介绍了基于node的tcp客户端和服务端的简单通信，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
Node.js Domain 模块实例详解
这篇文章主要介绍了Node.js Domain 模块实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03
如何开发一个渐进式Web应用程序PWA
这篇文章主要介绍了如何开发一个渐进式Web应用程序PWA，对渐进式Web应用程序感兴趣的同学，可以参考下
2021-05-05
koa socket即时通讯的示例代码
这篇文章主要介绍了koa socket即时通讯的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
pnpm的安装和使用指南(推荐!)
如果你觉得npm比较慢,又不想用yarn,那么pnpm是一个很好的选择,下面这篇文章主要给大家介绍了关于pnpm的安装和使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
HTTP JSON接口模拟工具Interfake快速入门教程
这篇文章主要为大家介绍了HTTP JSON接口模拟工具Interfake快速入门教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
深入分析node.js的异步API和其局限性
这篇文章首先给大家介绍了为什么要用异步API，其次node.js异步api在使用过程有一些什么样的限制呢，对于这个问题我们下面来看看这篇关于node.js异步的介绍分析吧，有需要的可以参考借鉴。
2016-09-09
Electron调用外接摄像头并拍照上传实现详解
这篇文章主要为大家介绍了Electron调用外接摄像头并拍照上传实例实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
mongoose设置unique不生效问题的解决及如何移除unique的限制
这篇文章主要给大家介绍了关于mongoose数据库设置unique不生效问题的解决方法，以及Mongoose如何移除unique限制的方法示例，文中通过示例代码介绍的非常详细，需要的朋友们可以参考借鉴，下面随着小编来一起学习学习吧。
2017-11-11