Node.js--》详解express中的身份认证

news2025/1/16 15:06:50

目录

Web开发模式

身份认证

Session认证机制

在Express中使用Session认证

JWT认证机制

在Express中使用JWT


Web开发模式

目前主流的Web开发模式有两种:

基于服务端渲染的传统Web开发模式

服务端渲染的概念:服务器发送给客户端的HTML页面,是在服务器通过字符串的拼接,动态生成的。因此,客户端不需要使用Ajax这样的技术额外请求页面的数据。代码如下:

app.get('/index.html',(req,res)=>{
  // 1.要渲染的数据
  const user = {name:'zs',age:20}
  // 2.服务器通过字符串的拼接,动态生成 HTML 内容
  const html = `<h1>姓名:${user.name},年龄:${user.age}</h1>`
  // 3.把生成好的页面内容响应给客户端。因此客户端拿到的是带有真实数据的 HTML 页面
  res.send(html)
})

服务端渲染的优缺点

优点

1)前端耗时少:因为服务器端负责动态生成 HTML内容,浏览器只需要直接渲染页面即可。尤其是移动端,更省电。

2)有利于SEO:因为服务器端响应的是完整的 HTML页面内容,所以爬虫更容易爬取获得信息,更有利于SEO。

缺点

1)占用服务器端资源:即服务器端完成HTML页面内容的拼接,如果请求较多,会对服务器造成一定的访问压力。

2)不利于前后端分离,开发效率低:使用服务器端渲染,则无法进行分工合作,尤其对于前端复杂度高的项目,不利于项目高效开发。

基于前后端分离的新型Web开发模式

前后端分离的概念:前后端分离的开发模式,依赖于Ajax技术的广泛应用。简而言之,前后端分离的Web开发模式,就是后端只负责提供API接口,前端使用Ajax调用接口的开发模式。

前后端分离的优缺点

优点

1)开发体验好。前端专注于UI页面的开发,后端专注于api的开发,且前端有更多的选择性

2)用户体验好。Ajax技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新

3)减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的。

缺点

1)不利于SE0。因为完整的HTML页面需要在客户端动态拼接完成,所以爬虫对无法爬取页面的有效信息。(解决方案:利用Vue、React等前端框架的SSR (server side render)技术能够很好的解决SEO问题!)

如何选择Web开发模式

        比如企业级网站,主要功能是展示而没有复杂的交互,并且需要良好的SEO,则这时我们就需要使用服务器端渲染;而类似后台管理项目,交互性比较强,不需要考虑SEO,那么就可以使用前后端分离的开发模式。

        因此,具体使用何种开发模式并不是绝对的,为了同时兼顾了首页的渲染速度和前后端分离的开发效率,一些网站采用了首屏服务器端渲染+其他页面前后端分离的开发模式。

身份认证

身份认证(Authentication)又称“身份验证”、“鉴权”,是指通过一定的手段,完成对用户身份的确认。在Web开发中,也涉及到用户身份的认证,例如:各大网站的手机验证码登录邮箱密码登录二维码登录等。

身份认证的目的:为了确认当前所声称为某种身份的用户,确实是所声称的用户。

不同开发模式下的身份认证

对于服务端渲染前后端分离这两种开发模式来说,分别有着不同的身份认证方案:

1)服务端渲染推荐使用 Session 认证机制

2)前后端分离推荐使用  JWT 认证机制

Session认证机制

HTTP协议的无状态性:指的是客户端的每次HTTP请求都是独立的,连续多个请求之间没有直接的关系,服务器不会主动保留每次HTTP请求的状态。而要想突破HTTP的无状态的限制,就需要借助Cookie。

Cookie是存储在用户浏览器中的一段不超过4KB的字符串。它由一个名称(Name)、一个值(Value)和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。不同域名下的Cookie 各自独立,每当客户端发起请求时,会自动当前域名下所有未过期的Cookie一同发送到服务器。

Cookie的特性:自动发送、域名独立、过期时限、4KB限制。

Cookie在身份认证中的作用

客户端第一次请求服务器的时候,服务器通过响应头的形式,向客户端发送一个身份认证的Cookie,客户端会自动将Cookie保存在浏览器中。随后,当客户端浏览器每次请求服务器的时候,浏览器会自动将身份认证相关的Cookie,通过请求头的形式发送给服务器,服务器即可验明客户端的身份。

Cookie的安全性问题

由于Cookie是存储在浏览器中的,而且浏览器提供了读写Cookie的API,因此Cookie很容易被伪造,不具有安全性。因此不建议服务器将重要的隐私数据,通过Cookie的形式发送给浏览器,所以千万不要使用Cookie存储重要且隐私的数据,比如用户的身份信息、密码等。

而Session的认证机制就是为了提高cookie安全性的一种认证机制。

Session的工作原理

在Express中使用Session认证

在Express项目中,只需安装 express-session 中间件,即可在项目中使用Session认证:

npm install express-session

express-session中间件安装完成后,需要通过app.use()来注册session中间件,代码如下:

// 配置 Session 中间件
const session = require('express-session')
app.use(session({
  secret:'Session_test', // secret 属性值可以是任意字符串
  resave:false, // 固定写法
  saveUninitialized:true // 固定写法
}))

当express-session中间件配置成功后,即可通过 req.session 来访问和使用 session 对象,从而存储用户的关键信息:

// 登录的API接口
app.post('/api/login',(req,res)=>{
  // 判断用户提交的信息是否正确
  if(req.body.username !=='admin' || req.body.password !=='123456'){
    return res.send({status:1,msg:'登录失败'})
  }
  // 登录成功后,将成功的用户信息保存到session中
  // 注意:只有成功配置了 express-session 这个中间件后,才能通过 req 点出来 session 这个属性
  req.session.user = req.body // 用户的信息
  req.session.islogin = true // 用户的登录状态
  res.send({status:0,msg:'登录成功'})
})

当然也可以直接从 req.session 对象上获取之前存储的数据。代码如下:

app.post('/api/logout',(req,res)=>{
  // 清空session信息
  req.session.destroy()
  res.send({
    status:0,
    msg:'退出登录成功'
  })
})

Session认证的局限性:Session认证机制需要配合Cookie 才能实现。由于Cookie默认不支持跨域访问,所以,当涉及到前端跨域请求后端接口的时候,需要做很多额外的配置,才能实现跨域Session认证。

当前端请求后端接口不存在跨域问题的时候,推荐使用Session身份认证机制。

JWT认证机制

JWT(英文全称:JSON Web Token)是目前最流行的跨域认证解决方案。当前端需要跨域请求后端接口的时候,不推荐使用Session身份认证机制,推荐使用JWT认证机制。

JWT工作原理:用户的信息通过Token字符串的形式,保存在客户端浏览器中。服务器通过还原Token字符串的形式来认证用户的身份。

JWT的组成部分

Header(头部)、Payload(有效荷载)、Signature(签名)。

Payload部分才是真正的用户信息,它是用户信息经过加密之后生成的字符串。

Header和Signature是安全性相关的部分,只是为了保证Token的安全性。

三者之间使用英文的“.”分隔,格式如下:

Header.Payload.Signature

JWT的使用方式: 客户端收到服务器返回的WT之后,通常会将它储存在localStorage或sessionStorage中。此后,客户端每次与服务器通信,都要带上这个WT的字符串,从而进行身份认证。推荐的做法是把JWT放在HTTP请求头的Authorization字段中,格式如下:

Authorization: Bearer <token>

在Express中使用JWT

运行如下命令安装两个JWT相关的包:

# jsonwebtoken用于生成JWT字符串
# express-jwt用于将JWT字符串解析还原成JSON对象
npm install jsonwebtoken express-jwt@5.3.3

定义secret密钥:为了保证JWT字符串的安全性,防止JWT字符串在网络传输过程中被别人破解,我们需要专门定义一个用于加密和解密的secret密钥。

当生成JWT字符串的时候,需要使用 secret 密钥对用户的信息进行加密,最终得到加密好的JWT字符串;当把JWT字符串解析还原成JSON对象的时候,需要使用secret密钥进行解密。

// 定义 secret 密钥,建议将密钥命名为 secretKey
const secretKey = 'Hello Node.js'

生成JWT字符串:调用jsonwebtoken包提供的sign()方法,将用户的信息加密成JWT字符串,响应给客户端。

// 登录接口
app.post('/api/login',(req,res)=>{
  // 将 req.body 请求体中的数据,转存为 userinfo 常量
  const userinfo = req.body
  // 登录失败
  if(userinfo.username !=='admin' || userinfo.password !=='123456'){
    return res.send({
      status:400,
      message:'登录失败!'
    })
  }
  // 三个参数分别是:用户信息对象,加密密钥,配置对象
  const tokenStr = jwt.sign({username: userinfo.username},secretKey,{expiresIn:'20s'})
  // 用户登录成功后,生成 JWT 字符串,通过 token 属性响应给客户端
  res.send({
    status:200,
    message:'登录成功',
    token: tokenStr, // 要发送给客户端的 token 字符串 
  })
})

JWT字符串还原为JSON对象:客户端每次在访问那些有权限接口的时候,都需要主动通过请求头中的Authorization字段将Token字符串发送到服务器进行身份认证。此时,服务器可以通过express-jwt这个中间件,自动将客户端发送过来的Token解析还原成JSON对象。

// 注册将 JWT 字符串解析还原成 JSON 对象的中间件
// expiresJWT({secret:secretKey}) 用来解析 Token 的中间件
// .unless({path:[/^\/api\//]}) 用来指定哪些接口不需要访问权限
app.use(expressJWT({secret:secretKey}).unless({path:[/^\/api\//]}))

使用req.user获取用户信息:当express-jwt这个中间件配置成功之后,即可在那些有权限的接口中,使用req.user对象,来访问从WT字符串中解析出来的用户信息了,示例代码如下:

app.get('/admin/getinfo',function(req,res){
  // 使用 req.user 获取用户信息,并使用data属性将用户信息发送给客户端
  console.log(req.user);
  res.send({
    status:200,
    message:'获取用户信息成功',
    data:req.user, // 要发送给客户端的用户信息
  })
})

捕获解析JWT失败后产生的错误:当使用express-jwt解析Token字符串时,如果客户端发送过来的Token字符串过期或不合法,会产生一个解析失败的错误,影响项目的正常运行。我们可以通过 Express的错误中间件,捕获这个错误并进行相关的处理,示例代码如下:

// 使用全局错误处理中间件,捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
  // 这次错误是由 token 解析失败导致的
  if (err.name === 'UnauthorizedError') {
    return res.send({
      status: 401,
      message: '无效的token',
    })
  }
  res.send({
    status: 500,
    message: '未知的错误',
  })
})

具体详细代码如下:

// 导入 express 模块
const express = require('express')
// 创建服务器
const app = express()

// 导入JWT相关的两个包
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')

// 允许跨域资源共享
const cors = require('cors')
app.use(cors())

// 解析 post 表单数据的中间件
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))

// 定义 secret 密钥,建议将密钥命名为 secretKey
const secretKey = 'Hello Node.js'

// 注册将 JWT 字符串解析还原成 JSON 对象的中间件
// expiresJWT({secret:secretKey}) 用来解析 Token 的中间件
// .unless({path:[/^\/api\//]}) 用来指定哪些接口不需要访问权限
app.use(expressJWT({secret:secretKey}).unless({path:[/^\/api\//]}))

// 登录接口
app.post('/api/login',(req,res)=>{
  // 将 req.body 请求体中的数据,转存为 userinfo 常量
  const userinfo = req.body
  // 登录失败
  if(userinfo.username !=='admin' || userinfo.password !=='123456'){
    return res.send({
      status:400,
      message:'登录失败!'
    })
  }
  // 三个参数分别是:用户信息对象,加密密钥,配置对象
  const tokenStr = jwt.sign({username: userinfo.username},secretKey,{expiresIn:'50s'})
  // 用户登录成功后,生成 JWT 字符串,通过 token 属性响应给客户端
  res.send({
    status:200,
    message:'登录成功',
    token: tokenStr, // 要发送给客户端的 token 字符串 
  })
})

// 这是一个有权限的API接口
app.get('/admin/getinfo',function(req,res){
  // 使用 req.user 获取用户信息,并使用data属性将用户信息发送给客户端
  console.log(req.user);
  res.send({
    status:200,
    message:'获取用户信息成功',
    data:req.user, // 要发送给客户端的用户信息
  })
})

// 使用全局错误处理中间件,捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
  // 这次错误是由 token 解析失败导致的
  if (err.name === 'UnauthorizedError') {
    return res.send({
      status: 401,
      message: '无效的token',
    })
  }
  res.send({
    status: 500,
    message: '未知的错误',
  })
})

// 调用app.listen 方法,指定端口号并启动web服务器
app.listen(80,function(){
  console.log('Express server running at http://127.0.0.1:80');
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/155947.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JavaEE】进入Web开发的世界-CSS

目录 一、CSS的基本规则 二、HTML中如何引入CSS规则&#xff08;html资源如何和css资源产生联系&#xff09; 三、选择器&#xff08;selector&#xff09;规则 3.1各种选择器 3.2普通选择器使用 3.3选择器之间的优先级规则(即覆盖规则) 3.4进一步的选择器规则 3.5伪类…

测试必会 Docker 实战(一):掌握高频命令,夯实内功基础

在 Dokcer 横空出世之前&#xff0c;应用打包一直是大部分研发团队的痛点。在工作中&#xff0c;面对多种服务&#xff0c;多个服务器&#xff0c;以及多种环境&#xff0c;如果还继续用传统的方式打包部署&#xff0c;会浪费大量时间精力。在 Docker 出现后&#xff0c;它以更…

Java设计模式-外观模式Facade

介绍 外观模式&#xff08;Facade&#xff09;&#xff0c;也叫“过程模式&#xff1a;外观模式为子系统中的一组接口提供一个一致的界面&#xff0c;此模式定义了一个高层接口&#xff0c;这个接口使得这一子系统更加容易使用外观模式通过定义一个一致的接口&#xff0c;用以…

回溯法--n皇后问题

回溯法有两个模板--子集树、排列树&#xff0c;他们有回溯法的共同特点&#xff1a;深度优先搜索&#xff0c;如果一条路走不通&#xff0c;再退回来&#xff08;类似递归&#xff09;问题描述八皇后问题的历史八皇后问题最早是由国际象棋棋手马克斯贝瑟尔&#xff08;Max Bezz…

常用的字符串与内存操作函数(2)

Tips 1. 2. strerror() 1. C语言的库函数在运行的时候&#xff0c;如果发生错误&#xff0c;就会将错误码存在一个变量里面。这个变量就是&#xff1a;errno&#xff08;全局变量&#xff09;。 2. 这个函数的功能在于把错误码转化为对应的错误信息&#xff0c;错误信息…

macOS 13.2 开发者预览版 Beta2(22D5038i)发布

黑果魏叔 1 月 11 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 13.2 开发者预览版 Beta 2 更新&#xff08;内部版本号&#xff1a;22D5038i&#xff09;&#xff0c;本次更新距离上次发布隔了 27 天。macOS Ventura 带来了台前调度、连续互通相机、FaceTime 通话接…

纯CSS输入区域下划线

使用纯CSS实现文本输入的下划线&#xff0c;简洁有效&#xff0c;实现效果&#xff1a; 实现方式 实现方式也很简单&#xff1a; background: linear-gradient(#999 1px, transparent 0) 0 -1px/100% 2em; 例子代码&#xff1a; <!DOCTYPE html> <html lang"e…

【C语言航路】第十站:指针(三)深刻理解指针运算

目录 一、深刻理解指针和数组 1.一维数组 2、字符数组 &#xff08;1&#xff09;字符变量存放到数组中 &#xff08;2&#xff09;字符串存放到字符数组 &#xff08;3&#xff09; 字符串存放到一个指针中 3.二维数组 二、指针与数组经典笔试题 1.题1 2.题2 3.题3…

MCU-51:单片机之红外遥控(外部中断)

目录一、红外遥控简介二、硬件电路三、基本发送与接收四、NEC码五、代码演示5.1 红外遥控5.2 红外遥控电机调速注意&#xff1a;一定要看一、红外遥控简介 红外发射装置 也就是通常我们说的红外遥控器是由键盘电路、红外编码电路、电源电路和红外发射电路组成。红外发射电路的…

爬虫逆向之字体反爬(一)、镀金的天空-字体反爬-1

题目地址&#xff1a;http://www.glidedsky.com/level/crawler-font-puzzle-1 写一下之前处理过的几个字体反爬实战&#xff0c;也是很常见的一种反爬类型&#xff0c;这是第一篇 先来看一下题目 源码拿到的数字&#xff0c;和实际显示在网页的数字&#xff0c;明显不一样的 …

相见恨晚的 IDEA 使用技巧,能让你的代码飞起来

Live Templates 是什么&#xff0c;听上去感觉挺玄乎的。有的同学用过之后觉得简直太好用了&#xff0c;不能说大大提高了开发效率吧&#xff0c;至少也是小小的提高一下&#xff0c;节省了很多敲重复代码的时间。有的同学用过之后说&#xff1a;没什么用&#xff0c;奇技淫巧罢…

C语言_程序环境和预处理

目录 1. 程序的翻译环境 2. 程序的执行环境 3. C语言程序的翻译链接 4. 预编译过程详解 4.1 预定义符号介绍 4.1.1 __FILE__ //进行编译的源文件 4.1.2 __LINE__//文件当前的行号 4.1.3 __DATE__//文件被编译的日期 4.1.4 __TIME__//文件被编译的时间 4.1.5 __STDC__…

基于python的学生信息管理系统

《学生信息管理系统》程序使用说明在IDLE中运行《学生信息管理系统》即可进入如图1所示的系统主界面。在该界面中可以选择要使用功能对应的菜单进行不同的操作。在选择功能菜单时&#xff0c;有两种方法&#xff0c;一种是输入1&#xff0c;另一种是按下键盘上的↑或↓方向键进…

【Javascript】高阶函数,JSON,forEach,map,filter,reduce函数

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录高阶函数箭头函数apply函数JSONfilter函数map函数总结reduce函数find/findIndex函数every/some函…

线缆行业单绞机控制算法(详细图解)

在了解单绞机之前需要大家对收放卷以及排线控制有一定的了解,不清楚的可以参看下面几篇博客,这里不再赘述,受水平和能力所限,文中难免出现错误和不足之处,诚恳的欢迎大家批评和指正。 收放卷行业开环闭环控制算法 PLC张力控制(开环闭环算法分析)_RXXW_Dor的博客-CSDN博…

知识难懂到什么程度

爱因斯坦相对论&#xff0c;诺贝尔评委会都看不懂&#xff0c;到底说的是什么1905年&#xff0c;爱因斯坦发布狭义相对论&#xff1b;1916年&#xff0c;发布广义相对论&#xff1b;2年后&#xff0c;英国的汤姆逊教授通过实验验证了广义相对论的正确&#xff0c;同时也把爱因期…

容器适配器中stack queue priority_queue的介绍及模拟实现

文章目录容器适配器的概念deque的介绍及底层结构stack的介绍 stack的模拟实现 queue的介绍 queue的模拟实现 priority_queue的介绍 priority_queue的模拟实现 容器适配器的概念 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验…

清华大佬超全超详细讲解——C++STL看这份教程就够了

2022 年年度编程语言揭榜啦&#xff01;在上个月预想的 C、C、Python 三种候选语言中&#xff0c;C 脱颖而出&#xff0c;成为 TIOBE 2022 年度编程语言的最终获得者&#xff01;新的一波学习热潮要来了。TIOBE 编程语言社区排行榜是编程语言流行趋势的一个指标&#xff0c;每月…

数据分析思维(三)|测试/对比思维

测试/对比思维 1、概念 测试/对比思维可以说在数据分析的工作中随处可见。当我们通过各种手段得到一些结果数据后&#xff0c;如何评价结果的好坏呢&#xff1f;这个时候你可能会想到和标准结果进行比较、和之前的数据进行对照等等方法&#xff0c;这些方法归根结底就是一种测…

ubuntu 安装 Gitkraken 8.1.1 Pro 版本

GitKraken 是一个非常好用的 Git 图形界面客户端, 自 6.5.1 版本以后, GitKraken 对私有仓库不再免费开放使用 本文介绍一个 ubuntu 安装 GitKraken 8.1.1 Pro 版本的方法 环境准备 安装 yarn 测试过 node 18.12.1 版本, 没能升级到 Pro 版, 可能是因为 GitCracken 仓库太久…