.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.rhkb.cn/news/174810.html

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

相关文章

【Linux】centOS7安装配置及Linux的常用命令---超详细

一&#xff0c;centOS 1.1 centOS的概念 CentOS&#xff08;Community Enterprise Operating System&#xff09;是一个由社区支持的企业级操作系统&#xff0c;它是以Red Hat Enterprise Linux&#xff08;RHEL&#xff09;源代码为基础构建的。CentOS提供了一个稳定、可靠且…

macOS M1安装wxPython报错‘tiff.h‘ file not found的解决方法

macOS12.6.6 M1安装wxPython失败&#xff1a; 报错如下&#xff1a; imagtiff.cpp:37:14: fatal error: tiff.h file not found解决办法&#xff1a; 下载源文件重新编译&#xff08;很快&#xff0c;5分钟全部搞定&#xff09;&#xff0c;分三步走&#xff1a; 第一步&…

完整的电商平台后端API开发总结

对于开发一个Web项目来说&#xff0c;无论是电商还是其他品类的项目&#xff0c;注册与登录模块都是必不可少的&#xff1b;注册登录功能也是我们在日常生活中最长接触的&#xff0c;对于这个业务场景的需求与逻辑大概是没有什么需要详细介绍的&#xff0c;市面上常见的邮箱注册…

如何将word格式的文档转换成markdown格式的文档

如何将word格式的文档转换成markdown格式的文档 前言 A. 介绍Markdown和Word格式文档 什么是Markdown&#xff1f; Markdown是一种轻量级标记语言&#xff0c;旨在简化文本格式化和排版的过程。它以纯文本形式编写&#xff0c;通过使用简单的标记语法&#xff0c;使文档更具…

C代码的单元测试

C代码中集成gtest单元测试_gtest测试c语言_山河故人~的博客-CSDN博客 Linux安装gtest_gtest安装_山河故人~的博客-CSDN博客 一&#xff1a;安装gtest: 1. 安装gtest 采用源码安装的方式&#xff0c;需确保cmake已经安装。 git clone https://github.com/google/googletest …

IPv6地址配置方式

IPv6地址分类 IPv6地址分为单播地址、任播地址&#xff08;Anycast Address&#xff09;、组播地址三种类型。和IPv4相比&#xff0c;取消了广播地址类型&#xff0c;以更丰富的组播地址代替&#xff0c;同时增加了任播地址类型。 单播地址 IPv6单播地址标识了一个接口&…

如何创建 Spring Boot 项目

如果有pom.xml有插件异常&#xff0c;可以先删除。 maven配置要配置好 然后yaml&#xff0c;再启动就行 server:port: 9991 spring:application:name: demo3参考 如何创建 Spring Boot 项目_创建springboot项目_良月初十♧的博客-CSDN博客

【多线程面试题十六】、谈谈ReentrantLock的实现原理

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;谈谈ReentrantLock的实现…

Android NDK开发详解之CMake工具链

Android NDK开发详解之CMake工具链 CMake 工具链文件用法工具链参数ANDROID_ABIANDROID_ARM_MODEANDROID_ARM_NEONANDROID_LDANDROID_NATIVE_API_LEVELANDROID_PLATFORMANDROID_STL 了解 CMake 构建命令使用预构建库构建第三方代码CMake 中的 YASM 支持报告问题 Android NDK 支…

本地生活商家用批量剪辑有用吗?

可以用&#xff0c;现在很多本地生活商家&#xff0c;都会通过借助批量剪辑工具来提升视频的曝光量&#xff0c;从而带动店铺的客流量。 推荐本地生活商家使用超级编导批量剪辑工具&#xff0c;这是一款0基础小白也可以很快上手的批量剪辑工具&#xff0c;剪辑页面布局以及功能…

c: two-dimensional array

/*** ****************************************************************************** file twoDimensional.h* brief 二维数组 Pointers and 2-D arrays* author geovindu,Geovin Du,涂聚文 (geovindu163.com)* ide: vscode c11,c17 windows 10* date…

VPS是什么?详解亚马逊云科技Amazon Lightsail(VPS)虚拟专用服务器

2006年&#xff0c;南非开普敦&#xff0c;亚马逊推出了WBS&#xff0c;以网络服务的形式向企业提供基础的IT服务。亚马逊云科技的一小步&#xff0c;在无数技术更迭&#xff0c;天才设计师和程序员的努力与基础设施建设的完善之下成为了人类科技进展的一大步。 亚马逊云科技可…

电路的电线的拼接

不积跬步无以至千里&#xff0c;今天小编也是复习今天学习的内容&#xff0c;废话不多说&#xff0c;看博客吧&#xff01;&#xff01;&#xff01; 目录 准备条件 操作 成品 准备条件 操作 将定制的套管插入导线当中&#xff0c;24V或者0V是尖端的端子&#xff0c;后面根…

web前端常见开发工具汇总 你用过几个?

搬运旗下公众号的内容~ 目录 1.记事本 2.Visual studio code 3.Hbuilder 4.Eclipse 5.Webstorm 6.Notepad 随着信息时代的不断进步&#xff0c;互联网在人类社会中所占的地位愈发举足轻重。大大小小的网站&#xff0c;构成了如今光怪陆离的网络社会。我们知道&#xff0c…

Sprint Cloud Stream整合RocketMq和websocket实现消息发布订阅

1.引入RocketMQ依赖&#xff1a;首先&#xff0c;在pom.xml文件中添加RocketMQ的依赖&#xff1a; <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2.0</versi…

轻量级 IDE 文本编辑器 Geany 发布 2.0

Geany 是功能强大、稳定、轻量的开发者专用文本编辑器&#xff0c;支持 Linux、Windows 和 macOS&#xff0c;内置支持 50 多种编程语言。 2005 年Geany 发布首个版本 0.1。上周四刚好是 Geany 诞生 18 周年纪念日&#xff0c;官方发布了 2.0 正式版以表庆祝。 下载地址&#…

正则表达式引擎比较(翻译自:A comparison of regex engines)

原文&#xff1a; A comparison of regex engines – Rust Leipzig 引言 正则表达式&#xff08;或简称regex&#xff09;通常用于模式搜索算法。 有许多不同的正则表达式引擎提供不同的表达式支持、性能约束和语言绑定。 基于 John Maddock 之前的工作 (regex comparison)和…

window11 更改 vscode 插件目录,释放C盘内存

由于经常使用vscode开发会安装一些代码提示插件&#xff0c;然后C盘内容会逐渐缩小&#xff0c;最终排查定位到vscode。这个吃内存不眨眼的家伙。 建议&#xff1a;不要把插件目录和vscode安装目录放在同一个位置&#xff0c;不然这样vscode更新后&#xff0c;插件也会消失。 v…

Git窗口打开vim后如何退出编辑(IDEA/Goland等编辑器)

最近在学习git高级操作过程中&#xff0c;遇到了一下问题&#xff1a; 我在学习Git合并多个commit为一个的时候&#xff0c;需要输入一个命令 git rebase -i HEAD~2 这说明已经是编辑模式了。当我写好后&#xff0c;我还按照原来在linux上的按下ESC键&#xff0c;但是只是光…

【数据结构】数组和字符串(四):特殊矩阵的压缩存储:稀疏矩阵——三元组表

文章目录 4.2.1 矩阵的数组表示4.2.2 特殊矩阵的压缩存储a. 对角矩阵的压缩存储b~c. 三角、对称矩阵的压缩存储d. 稀疏矩阵的压缩存储——三元组表结构体初始化元素设置打印矩阵主函数输出结果代码整合 4.2.1 矩阵的数组表示 【数据结构】数组和字符串&#xff08;一&#xff…