.NET、VUE利用RSA加密完成登录并且发放JWT令牌设置权限访问

后端生成公钥私钥

使用RSA.ToXmlString(Boolean) 方法生成公钥以及私钥。

RSACryptoServiceProvider rSA = new();
string pubKey = rSA.ToXmlString(false);//公钥
string priKey = rSA.ToXmlString(true);//私钥

后端将生成的公钥发送给前端 

创建一个get请求,将后端生成的公钥发送给前端,需要注意,这里生成的公钥是XML格式需要转换为pkcs8格式,前端JS只能处理pkcs8格式,私钥不能发给前端!!!!

这里需要安装一个包XC.RSAUtil用于转换格式。

Install-Package XC.RSAUtil -Version 1.3.6

[HttpGet]
public object Edd()
{var keyList = RsaKeyConvert.PublicKeyXmlToPem(pubKey);//将xml格式转换为Pkcs8return keyList;
}

前端使用公钥加密密码 

 使用的加密库为JSEncrypt库,安装JSEncrypt库。

npm install jsencrypt -D

页面引用 

import {JSEncrypt} from 'jsencrypt'

 界面

<div id="JWT"><div>账号:<input type="text" v-model="MyName"/></div><div>密码:<input type="text" v-model="MyPassword"/></div><button @click="Myinput">登录</button>
</div>

 保存账号密码以及后端发送过来的公钥。

data() {return {MyName: null,//账号MyPassword: null,//密码pubKey:null,//公钥JWTkey:null//JWT令牌}
}

 在使用登录界面时调用函数接收公钥并且保存。

created() {PostJwtEdd().then(res=>{this.pubKey=res}).catch(err => {console.log(err)})
}

 前端在输入账号密码后,对密码进行加密,将加密后的密码发送请求给后端,对比成功后前端将JWT令牌保存。

methods:{Myinput(){var encryptor = new JSEncrypt()encryptor.setPublicKey(this.pubKey)var rsaPassWord = encryptor.encrypt(this.MyPassword)//加密密码PostJwtDdd(this.MyName, rsaPassWord).then(res => {this.JWTkey=res//将后端生成的JWT令牌保存}).catch(err => {console.log(err)})}
}

发送密码的axio请求部分

export function PostJwtDdd(MyName,MyPassword){return request({method: 'post',url: '/JWTS/Ddd',data:{MyName,MyPassword}})
}

 这是发送的账号以及密码密文。

32d927f2022941459cf1df93cfaf9763.png

 后端接收参数对比

 后端接收得到参数,将密码密文进行解密。

创建一个类用于接收账号和加密后的密文。

public class RsaKey
{public string MyName { get; set; }public string MyPassword { get; set; }
}

 接收参数开始解密对比账号密码。

[HttpPost]
public object Ddd([FromBody] RsaKey rsaKey)
{rsa.FromXmlString(priKey);//传入私钥进行解密byte[] cipherbytex;cipherbytex = rsa.Decrypt(Convert.FromBase64String(rsaKey.MyPassword), false);var c = Encoding.UTF8.GetString(cipherbytex);//转换为string类型MyDbContext md = new MyDbContext();//对数据库表创建实体类var user = md.MyIntroductions.Where(x => x.MyName == rsaKey.MyName).Select(x => x.MyPassword);//数据库中寻找该账号对应的密码string users = null;foreach (var v in user){users = v;}if (user == null){return new { err = "账号错误" };}else{if (users == c){//登录成功}else{return new { err = "密码错误" };}}
}

 生成JWT令牌

登录成功之后开始生成JWT令牌并且返回给前端,在登录成功哪里生成。

需要安装两个包。

包1:System.IdentityModel.Tokens.Jwt

Install-Package System.IdentityModel.Tokens.Jwt

包2:Microsoft.AspNetCore.Authentication.JwtBearer

Install-Package Microsoft.AspNetCore.Authentication.JwtBearer

List<Claim> claims = new List<Claim>();
claims.Add(new Claim("MyName", rsaKey.MyName));
claims.Add(new Claim(ClaimTypes.Role, rsaKey.MyName));//颁发管理员角色
string key = jwtSettingsOpt.Value.SecKey;
DateTime expire = DateTime.Now.AddSeconds(jwtSettingsOpt.Value.ExpireSeconds);
byte[] secBytes = Encoding.UTF8.GetBytes(key);
var seckey = new SymmetricSecurityKey(secBytes);
var credentials = new SigningCredentials(seckey, SecurityAlgorithms.HmacSha256Signature);
var tokenDescriptor = new JwtSecurityToken(claims: claims, expires: expire, signingCredentials: credentials);
string jwt = new JwtSecurityTokenHandler().WriteToken(tokenDescriptor);
return jwt;

这是前端接收到的JWT令牌

c607913874a0466f9c2926d03d6cefa1.png

 后端权限访问

 后端创建一个post请求,该请求带有[Authorize]

[Authorize]是一个用于处理权限的,在这里的作用就是对没有JWT令牌的请求返回401错误,也就是我们可以利用这一点来对登录的用户开放一些权限,如果没有JWT令牌那么就无法请求到数据。

该post请求会返回请求人的账号。

[Authorize]
[HttpPost]
public object Bdd()
{return this.User.FindFirst("MyName")!.Value;
}

 前端带JWT令牌进行访问

需要注意的是JWT令牌是通过'Authorization'的一个请求头发送过去,格式必须为:

Authorization:Bearer+一个空格+后端生成的JWT令牌

前端界面

<button @click="MyJwt">查看权限</button>
MyJwt(){var JwtKey='Bearer '+this.JWTkeyconsole.log(JwtKey)PostJwtBdd(JwtKey).then(res=>{console.log(res)}).catch(err=>{console.log(err)})
}

axios请求部分

export function PostJwtBdd(JwtKey){return request({method: 'post',url: '/JWTS/Cdd',headers: {'Authorization': JwtKey}})
}

在后端请求中配置了[Authorize(Roles ="admin")]后,只有在Roles指定的用户才能对其接口进行访问,一般可以用于对管理员的访问,在生成JWT令牌的时候,

通过claims.Add(new Claim(ClaimTypes.Role, '用户'));来进行匹配,管理员用户。

 该post请求只有用户为admin的才能请求

[Authorize(Roles ="admin")]//配置只有管理员角色才能请求
[HttpPost]
public object Cdd()
{return this.User.FindFirst("MyName")!.Value;
}

 前端界面

<button @click="OneJwt">管理员权限</button>
OneJwt(){var JwtKey='Bearer '+this.JWTkeyconsole.log(JwtKey)PostJwtCdd(JwtKey).then(res=>{console.log(res)}).catch(err=>{console.log(err)})
}

axios请求部分,同样请求也只能通过'Authorization': 请求头进行发送。

Authorization+"空格"+生成的JWT令牌

export function PostJwtCdd(JwtKey){return request({method: 'post',url: '/JWTS/Cdd',headers: {'Authorization': JwtKey}})
}

如果带有的是错误的JWT令牌,那么后端会返回401错误,如图所示:

f781a71d731a47c58f9fd4bd7e4e36ac.png

并且不会返回任何的对象。

2b36c695fc414624b4cb1487b33596bb.png

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

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

相关文章

光流估计(二) FlowNet 系列文章解读

在上篇文章中&#xff0c;我们学习并解了光流&#xff08;Optical Flow&#xff09;的一些基本概念和基本操作&#xff0c;但是传统的光流估计方法计算比较复杂、成本较高。近些年来随着CNN卷积神经网络的不断发展和成熟&#xff0c;其在各种计算机视觉任务中取得了巨大成功&am…

【剑指offer|图解|双指针】移除元素 + 合并两个有序数组

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、算法模板、汇编语言 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️移除元素二. ⛳️合并两个有序数组&#x1f4dd;全文总结 &#…

vue3后台管理系统

项目创建及代码规范化开发 vue脚手架创建项目 安装vue脚手架 npm install-g vue/cli npm update -g vue/cli终端输入vue create 项目名称 即可进入模板选择 //利用vue-cli创建项目 进入模板选择 Vue CLI v5.0.8 ? Please pick a preset:Default ([Vue 3] babel, eslint)De…

2011-2021年“第四期”数字普惠金融与上市公司匹配(根据城市匹配)/上市公司数字普惠金融指数匹配数据

2011-2021年“第四期”数字普惠金融与上市公司匹配&#xff08;根据城市匹配&#xff09;/上市公司数字普惠金融指数匹配数据 1、时间&#xff1a;2011-2021年 指标&#xff1a;指标&#xff1a;股票代码、年份、行政区划代码、行业名称、行业代码、所属省份、所属城市、数字…

省市区三级联动查询redis(通过python脚本导入数据)

最近工作有一个工作需求是实现省市区联动&#xff0c;点击省下拉框&#xff0c;选中一个省&#xff0c;然后再选市&#xff0c;最后选区&#xff0c;当然最重要的首先自然是数据了&#xff0c;没数据怎么测试接口&#xff0c;我数据是在 https://hxkj.vip/demo/echartsMap/ 这里…

No172.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

记一次任意文件下载到Getshell

任意文件下载&#xff08;Arbitrary File Download&#xff09;是一种常见的 Web 攻击技术&#xff0c;用于窃取服务器上任意文件的内容。攻击者利用应用程序中的漏洞&#xff0c;通过构造恶意请求&#xff0c;使应用程序将任意文件&#xff08;如配置文件、敏感数据等&#xf…

Typora(morkdown编辑器)的安装包和安装教程

Typora&#xff08;morkdown编辑器&#xff09;的安装包和安装教程 下载安装1、覆盖文件2、输入序列号①打开 typora &#xff0c;点击“输入序列号”&#xff1a;②邮箱一栏中任意填写&#xff08;但须保证邮箱地址格式正确&#xff09;&#xff0c;输入序列号&#xff0c;点击…

安防监控项目---boa服务器的移植

文章目录 前言一、boa服务器简介二、移植步骤三、测试结果四、A9平台移植BOA总结 前言 书接上期&#xff0c;在配置完成环境后&#xff0c;那么接下来呢还得移植两个非常关键的东西&#xff0c;一个呢时boa服务器&#xff0c;另一个呢时cgi接口&#xff0c;boa服务器能够使得我…

Powershell脚本自动备份dhcp数据库

文章目录 为什么要备份DHCP数据库呢&#xff1f;在PowerShell中自动备份DHCP数据库1&#xff0c;创建备份目录2&#xff0c;判断备份路径是否存在3&#xff0c;备份DHCP数据库4&#xff0c;完整自动备份脚本5&#xff0c;安排定期备份 推荐阅读 为什么要备份DHCP数据库呢&#…

【AD9361 数字接口CMOS LVDSSPI】C 并行数据之LVDS

接上一部分&#xff0c;AD9361 数字接口CMOS &LVDS&SPI 目录 一、LVDS模式数据路径和时钟信号LVDS模式数据通路信号[1] DATA_CLK[2] FB_CLK[3] Rx_FRAME[4] Rx_D[5&#xff1a;0][5] Tx_FRAME[6]Tx_D[5&#xff1a;0][7] ENABLE[8] TXNRX系列 二、LVDS最大时钟速率和信…

N-130基于springboot,vue校园社团管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatis-plus 本系…

【C++深入浅出】模版初识

目录 一. 前言 二. 泛型编程 三. 函数模版 3.1 函数模版的概念 3.2 函数模版的格式 3.3 函数模版的原理 3.4 函数模板的实例化 3.5 模板参数的匹配原则 四. 类模版 4.1 类模版的定义 4.2 类模版的实例化 一. 前言 本期我们要介绍的是C的又一大重要功能----模版。通…

【Unity ShaderGraph】| 制作一个 高级流体水球效果

前言 【Unity ShaderGraph】| 快速制作一个 流体水球效果一、效果展示二、简易流体水球效果三、进阶流体水球效果四、应用实例 前言 本文将使用ShaderGraph制作一个 高级流体水球 &#xff0c;可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章&#xf…

微服务初始和Nacos安装

一)初始微服务: 微服务是将一个大型的&#xff0c;单一的应用程序拆分成多个小型服务&#xff0c;每一个服务负责于特定的业务功能&#xff0c;并且可以通过网络来和其他服务进行通讯&#xff0c;是一个思想&#xff0c;将一个大的项目拆分成多个小的项目&#xff0c;多个小的项…

Go语言标准输入

文章目录 Go语言标准输入函数使用 Go语言标准输入 函数 Scan // 使用stdin读取内容&#xff0c;读取的内容以空白&#xff08;换行也属于空白&#xff09;分隔&#xff0c;赋值给函数参数。返回读取的个数和错误 func Scan(a ...interface{}) (n int, err error)Scanf // 和…

C++进阶篇3---二叉搜索树(Binary Search Tree)

一、二叉搜索树的概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树: 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 它的…

基于jquery+html开发的json格式校验工具

json简介 JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式&#xff0c;但是也使用了类似于C语言家族…

Django 尝试SSE报错 AssertionError: Hop-by-hop headers not allowed 的分析

情况描述 近期计划测试一下django对日志打印的支持&#xff0c;一般都是用websocket的方式&#xff0c;想测试一下SSE (Server-sent events)的服务端推送&#xff0c;发现过程中存在报错&#xff1a; Traceback (most recent call last):File "D:\Software\Anaconda3\li…

shell中的运算

目录 1.运算符号 2.运算指令 练习 1.运算符号 运算符号意义加法-减法*乘法/除法%除法后的余数**乘方自加一- -自减一<小于<小于等于>大于>大于等于等于ji ->jji*j*i->jj*i/j/i->jj/i%j%i->jj%i 2.运算指令 (()) //((a12))let //let a12 …