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

news2024/10/7 15:30:49

目录

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.coloradmin.cn/o/1574765.html

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

相关文章

JVM内存性能调优思路之:通过GC log、Thread Dump 、Heap Dump分析内存使用说明

文章目录 一. 各日志概述1. Garbage Collection Log - 找到GC规律2. 线程转储(Thread dump) - 分析(快照)线程状态3. 堆转储(Heap dump) - APP某刻内存使用全貌 二. 命令1. 程序的gc日志2. 线程转储3. 堆转储 概述 在 Java 虚拟机中,(GC) Gar…

linux 文件提权|属性修改

文章目录 suid(set uid)添加文件属性查看文件属性i (immutable) umask suid(set uid) 让文件在执行的时候具有属主(对应文件 user )的权限 chmod 7744 temp.txt 第一位的7表示权限位…

软件自动化测试的难点怎么解决

软件自动化测试是一种使用工具或脚本来代替人工执行测试用例的方法,它可以提高测试的效率和质量,但也存在一些挑战和问题。 总结了以下几个常见的难点和解决方案: 接口文档的不完整性:有些接口的文档没有说明清楚必要的字段、参…

深入理解数据结构第三弹——二叉树(3)——二叉树的基本结构与操作

二叉树(1):深入理解数据结构第一弹——二叉树(1)——堆-CSDN博客 二叉树(2):深入理解数据结构第二弹——二叉树(2)——堆排序及其时间复杂度-CSDN博客 前言…

【前端Vue】Vue3+Pinia小兔鲜电商项目第4篇:静态结构搭建和路由配置,1. 准备分类组件【附代码文档】

Vue3ElementPlusPinia开发小兔鲜电商项目完整教程(附代码资料)主要内容讲述:认识Vue3,使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行…

C语言解决汉诺塔问题

背景 首先带大家了解一下汉诺塔问题 汉诺塔是一个典型的函数递归问题,汉诺塔描述了这样的场景,有三个柱子,A,B,C,A柱为起始柱,在A柱上面有若干大小不同的盘子,最下面的最大,最上面的最小&#x…

Linux系统下安装ElasticSearch

一、228环境ES使用安装 1、检验ES服务是否安装成功的方法 (1)查看Elasticsearch进程是否成功 ps -ef|grep elasticsearch (2)linux elasticsearch下访问(curl带认证访问) curl --user elastic:Zhes.13…

CSS面试题常用知识总结day03

大家好我是没钱的君子下流坯,用自己的话解释自己的知识 前端行业下坡路,甚至可说前端已死,我还想在前段行业在干下去,所以从新开始储备自己的知识。 从CSS——>Javascript——>VUE2——>Vuex、VueRouter、webpack——>…

STM32F103C8T6-CAN

本文内容 HAL库下printf重定向解决问题:Keil下调试可以正常运行,而下载后运行不了CAN总线的回环测试,自发自收 printf重定向 实现printf重定向的目的是方便调试,通过UART查看打印的调试信息。 下面以STM32F103C8T6为例&#xf…

【前沿模型解析】潜在扩散模 1 | LDM第一阶段-感知图像压缩总览

文章目录 0 开始~1 感知压缩的目的2 自回归编码器-解码器生成模型一览2.1 AE 自编码器2.2 VAE 变分自编码器2.3 VQ-VAE2.4 VQ-GAN 3 代码部分讲解总览 0 开始~ 从今天起呢,我们会剖析LDM(潜在扩散模型) 从去年开始,大量的生成模…

数学建模-------MATLAB分支循环断点调试

1.if语句 (1)分段函数的引入(这里的数据表示的是分数的不同区间对应的等级) (1)这个就是一个十分简单的if语句,无论是if还是elseif后面都是不能添加任何分号的,这个例子就是一个分段的函数,在不…

基础总结篇:Activity生命周期

private int param 1; //Activity创建时被调用 Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.i(TAG, “onCreate called.”); setContentView(R.layout.lifecycle); Button btn (Button) findViewById(R.id.…

医药行业痛点以及OKR解决方案

一、背景 随着医药行业的快速发展和市场竞争的加剧,企业面临着前所未有的挑战和机遇。为了在激烈的市场竞争中立于不败之地,某知名医药企业决定引入OKR(Objectives and Key Results,目标与关键成果)管理模式&#xff0…

Gradle入门初探

一、Gradle简介: 我们都创建过基于Maven的项目,maven可以很好的管理项目的依赖,编译和打包项目,Gradle是一个和Maven类似的自动化构建工具,Maven是基于xml文件格式,而Gradle是基于Groovy的语言&#xff0c…

dm8数据迁移工具DTS

dm8数据迁移工具DTS DTS工具介绍 DM数据迁移工具提供了主流大型数据库迁移到DM、DM到DM、文件迁移到DM以及DM迁移到文件的功能。DM数据迁移工具采用向导方式引导用户通过简单的步骤完成需要的操作。 DM数据迁移工具支持: ◆ 主流大型数据库Oracle、SQLServer、MyS…

Advanced RAG 01:讨论未经优化的 RAG 系统存在的问题与挑战

编者按: 自 2023 年以来,RAG 已成为基于 LLM 的人工智能系统中应用最为广泛的架构之一。由于诸多产品的关键功能严重依赖RAG,优化其性能、提高检索效率和准确性迫在眉睫,成为当前 RAG 相关研究的核心问题。 我们今天为大家带来的这…

【无标题】【Android】Android中Intent的用法总结

2.显示地图: Java代码 Uri uri Uri.parse(“geo:38.899533,-77.036476”); Intent it new Intent(Intent.Action_VIEW,uri); startActivity(it); 3.从google搜索内容 Java代码 Intent intent new Intent(); intent.setAction(Intent.ACTION_WEB_SEARCH); intent.pu…

SAP操作教程第16期:SAP B1关于审批模块的设置

工作效率是企业的生存之本,也是员工能够在企业中发展之本。自动化和规范化的审批流程可以减少手动操作以及沟通环节、节约时间和资源从而提高工作效率。 所以,今天我们就一起来了解一下SAP B1中关于审批模块的设置。 01关于审批模块的设置 第一步&#x…

数据结构基础:双链表结构、实现

继续和颦颦学C语言呀.......> 双链表的结构 这里的head 为头节点,是‘哨兵位’,实际不存储任何有效的数据 它的存在是为了遍历环链表避免死循环 双链表的实现 typedef int LTDataType; typedef struct ListNode { struct ListNode* next; //指针保存…

为什么使用MQ????

1、异步处理 场景说明:用户注册后,需要发注册邮件和注册短信,传统的做法有两种 1.串行的方式 2.并行的方式。 串行方式: 将注册信息写入数据库后,发送注册邮件,再发送注册短信,以上三个任务全部完成后才返回给客户端。 这有一个问题是,邮件,短信并不是…