web学习笔记(五十三)身份认证

目录

1.Web 开发模式

1.1 服务端渲染的 Web 开发模式

1.2 服务端渲染的优缺点

1.3 前后端分离的 Web 开发模式

1.4 如何选择 Web 开发模式

2. 身份认证

 2.1 Session 认证机制

3.  在 Express 中使用 Session 认证

3.1 安装express-session 中间件

3.2 配置 express-session 中间

3.3 向 session 中存数据

3.4 从 session 中取数据

 3.5 清空 session

4. JWT 认证机制

4.1  JWT 的工作原理

4.2  JWT 的组成部分

4.3  JWT 的三个部分各自代表的含义

4.4 JWT 的使用方式

5. 在 Express 中使用 JWT

5.1 安装 JWT 相关的包

 5.2 导入 JWT 相关的包

5.3 定义 secret 密钥

5.4 在登录成功后生成 JWT 字符串

5.5 将 JWT 字符串还原为 JSON 对象

5.6 使用 req.user 获取用户信息

5.7捕获解析 JWT 失败后产生的错误


1.Web 开发模式

目前主流的 Web 开发模式有两种,分别是:

  • 基于服务端渲染的传统 Web 开发模式
  • 基于前后端分离的新型 Web 开发模式

1.1 服务端渲染的 Web 开发模式

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

 

1.2 服务端渲染的优缺点

优点:

  • 前端耗时少。因为服务器端负责动态生成 HTML 内容,浏览器只需要直接渲染页面即可。尤其是移动端,更省电。
  • 有利于SEO。因为服务器端响应的是完整的 HTML 页面内容,所以爬虫更容易爬取获得信息,更有利于 SEO。

缺点:

  • 占用服务器端资源。即服务器端完成 HTML 页面内容的拼接,如果请求较多,会对服务器造成一定的访问压力。
  • 不利于前后端分离,开发效率低。使用服务器端渲染,则无法进行分工合作,尤其对于前端复杂度高的项目,不利于项目高效开发。

1.3 前后端分离的 Web 开发模式

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

优点:

  • 开发体验好。前端专注于 UI 页面的开发,后端专注于api 的开发,且前端有更多的选择性。
  • 用户体验好。Ajax 技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新。
  • 减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的。

缺点:

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

1.4 如何选择 Web 开发模式

需要根据使用场景来选择开发模式,而且,具体使用何种开发模式并不是绝对的,为了同时兼顾了首页的渲染速度和前后端分离的开发效率,一些网站采用了首屏服务器端渲染 + 其他页面前后端分离的开发模式。

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

2. 身份认证

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

  • 服务端渲染推荐使用 Session 认证机制 ---cookie
  • 前后端分离推荐使用 JWT 认证机制 -----localStorage

 2.1 Session 认证机制

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

但是 Cookie 不具有安全性,由于 Cookie 是存储在浏览器中的,而且浏览器也提供了读写 Cookie 的 API,因此 Cookie 很容易被伪造,不具有安全性。因此不建议服务器将重要的隐私数据,通过 Cookie 的形式发送给浏览器。

3.  在 Express 中使用 Session 认证

3.1 安装express-session 中间件

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

npm install express-session

3.2 配置 express-session 中间

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

3.3 向 session 中存数据

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

3.4 从 session 中取数据

可以直接从 req.session 对象上获取之前存储的数据,示例代码如下:

 3.5 清空 session

调用 req.session.destroy() 函数,即可清空服务器保存的 session 信息。

4. JWT 认证机制

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

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

4.1  JWT 的工作原理

JWT(英文全称:JSON Web Token)是目前最流行的跨域认证解决方案。

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

4.2  JWT 的组成部分

JWT 通常由三部分组成,分别是 Header(头部)、Payload(有效荷载)、Signature(签名)。三者之间使用英文的“.”分隔,格式如下:

4.3  JWT 的三个部分各自代表的含义

JWT 的三个组成部分,从前到后分别是 Header、Payload、Signature。其中:Payload 部分才是真正的用户信息,它是用户信息经过加密之后生成的字符串。Header 和 Signature 是安全性相关的部分,只是为了保证 Token 的安全性。

4.4 JWT 的使用方式

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

5. 在 Express 中使用 JWT

5.1 安装 JWT 相关的包

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

  • jsonwebtoken 用于生成 JWT 字符串
  • express-jwt 用于将 JWT 字符串解析还原成 JSON 对象

 5.2 导入 JWT 相关的包

使用 require() 函数,分别导入 JWT 相关的两个包:

5.3 定义 secret 密钥

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

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

 

5.4 在登录成功后生成 JWT 字符串

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

5.5 将 JWT 字符串还原为 JSON 对象

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

5.6 使用 req.user 获取用户信息

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

5.7捕获解析 JWT 失败后产生的错误

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

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

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

相关文章

electron 打不同环境的包

我用的打包工具: electron-builder 1、在package.json 文件的同级下创建2个js文件 electron-builder-test.config.js electron-builder.config.js electron-builder-test.config.js const basejson require(./electron-builder.config.js); module.exports {extraMetada…

智能变电站协议系列-5、IEC 104协议细化解读(IEC 60870以及如何获取对应国标和行标)

一、前言 通过之前整体性的协议分析,目前确定先基于IEC104做深入分析,来结合分析电网常见的业务,以此从协议侧关联深入到业务侧。在国内该标准也应用比较稳定和广泛了,所以研究104协议相关资料也会更全一些。 二、资料及标准收集…

【强化学习的数学原理-赵世钰】课程笔记(二)贝尔曼公式

【强化学习的数学原理-赵世钰】课程笔记(二)贝尔曼公式 一. 内容概述 1. 第二章主要有两个内容 (1)一个核心概念:状态值(state value):从一个状态出发,沿着一个策略我…

OWASP TOP10 漏洞详解

前言 该内容是 OWASP TOP 10 的学习笔记,笔记内容来源 B 站龙哥的视频【12.Top漏洞10:服务器请求伪造_哔哩哔哩_bilibili】 一、访问控制崩溃 概念 未对通过身份验证的用户实施恰当的访问控制。攻击者可以利用这些缺陷访问未经授权的功能或数据&#xf…

QA测试开发工程师面试题满分问答9: Python中内存管理的概念、原理、使用

概念原理 Python中的内存管理是由解释器自动处理的,它使用引用计数和垃圾回收机制来管理内存。以下是Python内存管理的一些关键概念、设计原理和最佳实践,以帮助您高效使用和管理内存: 引用计数:Python使用引用计数来追踪对象的引…

基于JAVA+SSM+微信小程序+MySql的图书捐赠管理系统设计与实现(前后端分类)

一、项目背景介绍: 在当今社会,图书捐赠是一种普遍而有益的行为,旨在促进阅读、教育和知识传播。图书捐赠可以帮助改善教育资源不足的地区、学校和社区的阅读环境,提供更多的学习机会和知识获取途径。随着互联网和移动技术的发展&…

Redis-更新策略,缓存穿透,缓存雪崩,缓存击穿

Redis-更新策略,缓存穿透,缓存雪崩,缓存击穿 1.缓存更新 策略 淘汰策略超时剔除主动更新 更新策略:先修改数据库还是先删除缓存 结论:先修改数据库,因为缓存的操作比较快,容易产生数据不一致更新缓存还是删除缓存? …

网络协议——HTTP协议

目录 ​编辑 一,HTTP协议基本认识 二,认识URL 三,http协议的格式 1,发送格式 2,回应格式 四,服务端代码 五,http报文细节 1,Post与Get方法 2,Content_lenth 3&…

html加载后端数据较慢问题记载

标题: html加载后端数据较慢问题记载 日期: 2024-04-06 22:29:00 标签: [html, flask] 分类: [Python, Flask] 网站页面最近加载很慢,不知道为什么,这里记录一下,一步一步查问题的思路。 说下环境 python3.8 flask2.3.3 mysql5.7 问题 刷…

爬虫实战一、Scrapy开发环境(Win10+Anaconda3)搭建

#前言 在这儿推荐使用Anaconda进行安装,并不推荐大家用pythonpip安装,因为pythonpip的坑实在是太多了。 #一、环境中准备: Win10(企业版)Anaconda3-5.0.1-Windows-x86_64,下载地址,如果打不开…

每日OJ题_两个数组dp①_力扣1143. 最长公共子序列

目录 力扣1143. 最长公共子序列 解析代码 力扣1143. 最长公共子序列 1143. 最长公共子序列 难度 中等 给定两个字符串 text1 和 text2,返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 ,返回 0 。 一个字符串的 子序列 是指这样…

尚硅谷html5+css3(2)CSS5基本知识

1.网页分为三个部分: 结构:HTML 表现:CSS 行为JavaScript CSS:层叠样式表,网页实际上是一个多层结构,通过CSS可以分别为网页的每一个层来设置样式,最终用户只看最上面的一层,总之&#xff0…

蚁群优化算法(Ant Colony Optimization Algorithm)

注意:本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 ([www.aideeplearning.cn]) 算法引言 蚁群算法,是一种模拟蚂蚁觅食行为的优化算法。想象一下,当你在野餐时,不小心洒了一些糖在地上。一…

免疫检查点信号转导和癌症免疫治疗(文献)

目录 基础 介绍 免疫检查点的表面调控(细胞膜层面) ​编辑 PD-1调节 PD-L1调节 CTLA-4 调节 检查点信号通路 关于靶点研究 展望 Immune checkpoint signaling and cancer immunotherapy - PubMed (nih.gov) 基础 【中英字幕】肿瘤免疫疗法之免…

分享10个免费高可用的GPT3.5和4.0网站并做功能测试【第一个】

1.介绍 网址:直接点:aicnn 或者 www.aicnn.cn 基于ChatGPT可以实现智能聊天、绘画生成、高清文本转语音、论文润色等多种功能,基于sd和mj实现的绘画功能,下面是功能测试: 博主从 1.GPT3.5是否完全免费/是否限制频率、…

MySQL学习笔记------事务

事务 事务是一组操作的集合,他是一个不可分割的单位,事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败 事务操作 create table account(id int comment ID,name varchar(10) …

Spring 中类似 aBbb 单字母单词序列化与反序列问题

文章目录 前言代码准备问题排查lombok自定义生成 get、set 结合源码解析使用 lombok使用 lombok 自定义生成 user 对象 get、set 方法 如何解决使用注解 JsonProperty("aTest")自定义实现符合 Spring 规范的 get set 方法 个人简介 前言 最近在使用 spring boot mvc…

Linux下Qt生成程序崩溃文件

文章目录 1.背景2.Qt编译生成程序2.1.profile模式的本质 3.执行程序,得到core文件4.代码定位4.1.直接使用gdb4.2.使用QtCreator 5.总结6.题外话6.1.profile模式和debug模式的区别 1.背景 在使用Qt时,假如在windows,当软件崩溃时,…

C++11右值引用

传统的C语法中就有引用的语法,而C11中新增了的右值引用语法特性,所以从现在开始我们之前学习的引用就叫做左值引用。无论左值引用还是右值引用,都是给对象取别名。 左值与左值引用 左值是一个表示数据的表达式(如变量名或解引用的指针)&…