Node.js Express-Jwt JsonWebToken Token 身份验证教程

引言

本文旨在阐述在Node.js环境中，结合Express-Jwt与JsonWebToken库实现身份验证的具体方案

示例代码

设想一种用户登录场景：用户完成登录后，前端向后端发起用户信息请求，并将获取的数据渲染至页面

未采用Token机制

前端代码

<!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>

此段代码逻辑简单，功能为点击按钮向后端请求用户数据并渲染至页面

后端代码

/* 导入第三方库 */
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');
})

此处为后端实现，定义了处理路由的函数以响应前端请求，具备基础知识的开发者应能轻松理解

随后对代码进行升级，前端不再能直接请求服务器数据，必须通过Token认证方可获取用户信息

采用Token机制

前端代码

<!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，否则无权获取用户信息

后端代码详解

重点解析后端代码部分

/* 导入第三方库 */
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属性，通过该属性可根据客户端发送的Token解析出对应信息，从而达成使用Token进行身份认证的目标

对比上述两处代码，读者应能清晰掌握基本Token身份认证的实现方式，后续的功能升级亦可基于此基础进行扩展

至此，关于Node.js使用Express-Jwt和JsonWebToken进行Token身份验证的介绍完毕，更多相关Node.js Token身份验证内容请查阅本站历史文章或继续浏览下方相关文章，感谢大家的支持！

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

引言

示例代码

未采用Token机制

前端代码

后端代码

采用Token机制

前端代码

后端代码详解

实用工具推荐