前端中的身份认证

news2024/11/16 11:46:55

一.Cookie

1.1.HTTP协议的无状态性

HTTP协议的无状态:

客户端的每次HTTP请求都是独立的,之间没有直接关系

服务器不会主动保留每次HTTP请求的状态

在这里插入图片描述

1.2.任何突破HTTP无状态的限制

发会员卡

在这里插入图片描述

注意:

​ 现实中,会员卡身份认证方式,在Web开发中的专业术语叫做Cookie

1.3.什么是Cookie

Cookie是存储在用户浏览器中的一段不超过4KB的字符串

在这里插入图片描述

不同域名下的Cookie各自独立

每当客户端发起请求时,会自动把当前域名下所有未过期的Cookie一同发送到服务器进行身份验证

特点:

  1. 自动发送
  2. 域名独立
  3. 过期时限
  4. 4KB限制

1.4.Cookie在身份认证中的作用

在这里插入图片描述

不安全,容易被伪造,千万不要使用Cookie存储重要的数据
在这里插入图片描述

二 .Session

2.1图解

会员卡+刷卡认证,就是Session认证机制的精髓

在这里插入图片描述

2.2.Session工作原理

在这里插入图片描述

2.3.在Express中使用Session认证

2.3.1安装

npm install express-session

2.3.2配置express-session中间件

//导入session 中间件
var session = require('express-session')

//配置Session中间件
app.use(session({
     secret:"keyboard cat",     //secret 属性的值可以为任意字符串
     resave: false,             //固定写法
     saveUninitialized: true    //固定写法
}))

2.3.3向session中存数据

express-session 中间件配置成功

可通过 req.session来访问和使用 session对象

存储用户的关键信息

app.post('/api/login',(req,res)=>{
    //判断用户提交的登录信息是否正确
    if(req.body.username !== 'admin' || req.body.password !== '00000'){
        return res.send({status: 1,msg:'登录失败'})   
    }
    req.session.user = req.body   //将用户信息,存储到Session中
    req.session.islogin = true    //将用户登录状态,存储到Session中
    
    res.send({status:0,msg:'登录成功'})
})

2.3.4从session中取数据

//获取session中取数据
app.get('/api/username',(req,res)=>{
    //判断用户是否登录
    if(!req.session.islogin){
        return res.send({status:1,msg:'fail'})
    }
    res.send({status:0,msg:'success',username:req.session.user.username})
})

2.3.5清空session

//退出登录的接口
app.post('/api/logout',(req,res)=>{
    //清空当前客户端对应的session信息
    req.session.destroy()
    res.send({
       status:0,
       msg:'退出登录成功'
    })
})

三.JWT

3.1Session认证的局限性

Session认证机制需要配合Cookie才能实现

Cookie默认不支持跨域访问(需要额外配置)

3.2什么是JWT

JWTJSON Web Token) 是目前最流行的跨域认证解决方案

3.3JWT工作原理

用户的信息通过Token字符串的形式,保存在客户端浏览器中

服务器通过还原Token字符串的形式来认证用户的身份
在这里插入图片描述

3.4JWT的组成部分

JWT由三部分组成:

Header(头部)--------------------->安全性相关

Payload(有效荷载)-------------->用户信息加密后的字符串

Signature(签名)------------------>安全性相关

Header.Payload.Signature

3.5JWT的使用方式

客户端收到服务器返回的JWT之后

通常存储在localStoragesessionStorage

客户端每次通信都要带上这个JWT字符串,进行身份认证

(推荐把JWT放在HTTP请求头的Authorization字段中)

Authorization:Bearer <token>

3.6在Express中使用JWT

3.6.1安装JWT相关的包

npm install jsonwebtoken express-jwt

jsonwebtoken 用于生成JWT字符串

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

3.6.2导入JWT相关的包

//导入用于生成JWT字符串的包
const jwt = require('jsonwebtoken')
//导入用于将客户端发送过来的JWT字符串,解析还原成JSON对象的包
const experssJWT = require('express-jwt')

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

//自定义
const secretKey = 'itheima No1 ^_^'
//登录接口
app.post('/api/login',function(req,res){
   //用户登录成功之后,生成JWT字符串,通过token属性响应给客户端
   res.send({
     status:200,
     message:'登录成功'//调用jwt.sign()生成JWT字符串,三个参数分别是:用户信息对象,加密密钥,配置对象
     token:jwt.sign({username:userinfo.useranme},secretKey,{expiresIn:'30s'})
   })
})

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

客户端每次访问那些有权限接口的时候

都需要主动通过请求头中的Authorization字段

服务器可以通过express-jwt中间件,将客户端发送过来的token解析还原成JSON对象

//使用app.use() 来注册中间件
//expressJWT ({secret:secretKey}) 就是用来解析Token 的中间件
//.unless({path:[//^\/api\//]})  用来指定哪些接口不需要访问权限
app.use(expressJWT({secret:secretKey}).unless({path:[//^\/api\//]}))

3.6.5使用req.auth获取用户信息

express-jwt这个中间件配置成功之后

即可使用req.user对象,访问解析出来的用户信息

//这个是一个有权限的API接口
app.get('/admin/getinfo',function(req,res){
    console.log(req.auth)
    res.send({
        status:200,
        message:'获取用户信息成功!',
        data:req.auth
    })
})

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

如果客户端发送过来的Token字符串过期或不合法

会产生一个解析失败的错误

app.use(err,req,res,next){
    //token解析失败导致的错误
    if(err.name === 'UnauthorizedError'){
        return res.send({status:401,message:'无效的token'})
    }
    //其它原因导致的错误
    res.send({status:500,message:'未知错误'})
}

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

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

相关文章

03 - 调试环境的搭建(Bochs)

---- 整理自狄泰软件唐佐林老师课程 1. Bochs&#xff08;另一款优秀的虚拟机软件&#xff09; 专业模拟x86架构的虚拟机 开源且高度可移植&#xff0c;由C编写完成 支持操作系统开发过程中的断点调试 通过简单配置就能运行绝大多数主流的操作系统 2. Bochs的安装与配置 下载…

[附源码]计算机毕业设计社区人员信息管理系统设计与实现Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

HRB系列直流隔离可调电源模块:用20K电位器和200K电位器区别

今天俞霖科技小编简谈如何合理地选用DC-DC模块电源&#xff0c;本文将从DC-DC模块电源开发设计的角度来简谈以上问题&#xff0c;以供广大技术设计人员参考。 DC-DC模块电源的众多优点是大家众所周知的&#xff0c;DC-DC模块电源以其体积小巧、性能卓异、使用方便的显著特点&a…

ArcGIS API For JavaScript(8)之使用动态图层dynamicLayers实现多图层合并截图

场景还原&#xff1a; 定位某个矢量图斑范围面&#xff0c;过滤展示该图斑&#xff0c;以图斑为中心&#xff0c;截图图斑周边并附带影像底图的截图。 在前端要实现地图截图&#xff0c;首先想到的是使用arcgis rest api中的export接口&#xff0c;这是没问题的&#xff0c;exp…

工业物联网关-modbus数据采集程序(1-程序设计)

写代码之前 最近代码写慢了&#xff0c;磨了好久都没开始动手写代码。考虑的东西越多越多&#xff0c;甚至自己都认为过虑了。就像这个程序&#xff0c;写代码之前估计花了大半天或者一天在思考怎么写&#xff0c;不知道是好事还是年纪大了。所以专门写篇文章&#xff0c;把自…

为什么要选择 Redis?

文章目录前言一、选型二、协议三、客户端1、常见 java 客户端2、常见可视化工具&#xff1a;四、Redis 生态1、模块2、代理3、其他前言 Redis&#xff08;Remote Dictionary Server&#xff09;&#xff0c;即「远程字典服务」是一个使用 ANSI C 编写的、开源的、支持网络的、…

【电力系统】基于YALMIP 的微网(光伏+风电+蓄电池+微电网+柴油机)优化调度模型附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

Unity—UGUI

每日一句&#xff1a;读数、学习 去更远的地方&#xff0c;才能摆脱那些你不屑一顾的圈子 目录 InputFiled输入框 例&#xff1a;用户名和密码 Toggle组件 案例&#xff1a;冷却效果 InputFiled输入框 Text Component 输入文本组件 Text输入内容 Character Limit 输入字符…

宝塔后渗透-添加用户_反弹shell

更新时间&#xff1a;2022年11月21日 1. 背景介绍 对于想拿到bt后台来说&#xff0c;非常的艰难&#xff1a;无非是通过bypass之后提权&#xff0c;直接拿到服务器的root权限&#xff0c;然后再去宝塔后台。 当然&#xff0c;还有一种运气十分爆棚的方法&#xff1a;发现了b…

Qt的Q_UNUSED()函数的功能

目录Qt Assistant&#xff08;Qt 助手&#xff09;构建场景其他一些平替方法参考Qt Assistant&#xff08;Qt 助手&#xff09; 函数名直译过来是【不用的&#xff1b;从未用过的】。 碰到陌生的函数不要慌&#xff0c;直接Qt Assistant查一哈。 Q_UNUSED(name) Indicates to …

负载均衡器 OpenELB ARP 欺骗技术解析

作者&#xff1a;大飞哥&#xff0c;视源电子运维工程师&#xff0c;KubeSphere 用户委员会广州站站长&#xff0c;KubeSphere Ambassador。 K8S 对集群外暴露服务有三种方式&#xff1a;NodePort&#xff0c;Ingress 和 Loadbalancer。NodePort 用于暴露 TCP 服务(4 层)&#…

基于5G智能网关的水泵远程监控系统方案

方案背景 水泵作为一种常见的水务设备&#xff0c;在日常的生产、生活中发挥重要的作用。为了保证生产、生活用水&#xff0c;也为了预防异常天气带来的过度降水&#xff0c;水泵具备的供水、排水作用都是不可忽视的。然而&#xff0c;很多地区的水泵管理模式依然停留在专人看…

毕业设计-基于机器视觉的手写字识别系统

目录 前言 课题背景和意义 实现技术思路 实现效果图样例 前言 &#x1f4c5;大四是整个大学期间最忙碌的时光,一边要忙着备考或实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。近几年各个学校要求的毕设项目越来越难,有不少课题是研究生级别难度的,对本科…

变焦镜头内参数如何获得?

很多时候,我们是使用相应的棋盘格标定进行相机内参数的获取,但是对于相机而言,如果要是焦距范围是测量比较远的物体,那么我们要进行注意相应的内参数就是不能够使用棋盘格标定法进行获取,因为不准. 由于项目的需要,这里我就是需要进行探究一下,如何通过自己调试直接设定内参数…

CSS 实现卡片边框渐变动画

前言 &#x1f44f;CSS实现卡片边框渐变动画&#xff0c;速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现步骤 父容器添加背景渐变色 <div class"card"></div>.card {background: linear-gradient(0deg, …

Tensorboader图片和模型可视化

非常简单&#xff0c;10分钟搞懂1 Tensorboader介绍2 进行写入和运行&#xff08;共2步&#xff09;3 图像显示3.1 显示图片3.2 显示模型3.3 动态显示学习率等参考文献1 Tensorboader介绍 它就是1个可视化工具&#xff0c;需要用pip进行下载&#xff1b; 下载以后进行显示&a…

SpringCloud框架(三):微服务优化,Feign的最佳实现方案

SpringCloud环境搭建&#xff1a;生产和消费 RestTemplate Spring章节复习已经过去&#xff0c;新的章节SpringCloud开始了&#xff0c;这个章节中将会回顾微服务相关 主要依照以下几个原则 每一个组件的Demo和Coding上传到我的代码仓库在原有基础上加入一些设计模式&#xf…

数据结构与算法之图的应用

一.树之习题选讲-Tree Traversals Again 树习题-TTA.1 题意理解 非递归中序遍历的过程 1. Push的顺序为先序遍历(pre)2. Pop的顺序给出中序遍历(in) 树习题-TTA.2 核心算法 上图分别是先序、中序、后序遍历通过规律我们可以看到他们之间的位置分配 //伪代码 void solve(int …

Zabbix在X86服务器上的部署流程

服务器资源:Centos7、X86架构 部署zabbix服务端 #设置SELinux 成为permissive模式临时关闭selinux防火墙 setenforce 0 #获取zabbix的下载源和更换阿里源 https://mirrors.aliyun.com/zabbix/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm #解压zabbix包 …

探花交友_第4章_MongoDB基础(新版)

探花交友_探花交友_第4章_MongoDB基础(新版) 文章目录探花交友_探花交友_第4章_MongoDB基础(新版)课程介绍1. 通用设置1.1 需求分析1.1.1 需求分析1.1.2 数据库表1.1.3 实体类SettingsQuestionBlackList1.2 查询通用设置1.2.1 接口文档1.2.2 代码实现vo对象tanhua-app-serverSe…