场景

前端使用Vue在进行登录时，需要将密码存进cookie中。

为了防止密码明文暴露，前端需要采用加密方式对密码进行加密。

常用加密方式之一就是RSA加密解密。

RSA加密是一种非对称加密。可以在不直接传递密钥的情况下，完成解密。这能够确保信息的安全性，避免了直接传递密钥所造成的被破解的风险。是由一对密钥来进行加解密的过程，分别称为公钥和私钥。两者之间有数学相关，该加密算法的原理就是对一极大整数做因数分解的困难性来保证安全性。通常个人保存私钥，公钥是公开的（可能同时多人持有）。

加密过程

（1）A生成一对密钥（公钥和私钥），私钥不公开，A自己保留。公钥为公开的，任何人可以获取。

（2）A传递自己的公钥给B，B用A的公钥对消息进行加密。

（3）A接收到B加密的消息，利用A自己的私钥对消息进行解密。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

前端使用RSA加密的常用的就是JSEncrypt。

首先在Vue项目中的package.json中添加插件

  "dependencies": {"jsencrypt": "3.0.0-rc.1",

然后

npm install

安装依赖

在项目目录下新建utils目录，在目录下新建jsencrypt.js

import JSEncrypt from 'jsencrypt/bin/jsencrypt'const publicKey = ''const privateKey = ''// 加密
export function encrypt(txt) {const encryptor = new JSEncrypt()encryptor.setPublicKey(publicKey) // 设置公钥return encryptor.encrypt(txt) // 对需要加密的数据进行加密
}// 解密
export function decrypt(txt) {const encryptor = new JSEncrypt()encryptor.setPrivateKey(privateKey)return encryptor.decrypt(txt)
}

这样就封装好了进行加解密的工具类方法。

下面就是生成用语加解密时的公钥和私钥。

这里直接使用在线生成的网站

http://web.chacuo.net/netrsakeypair

然后将生成的公钥和私钥放在上面的js中的对应的位置，那么就可以使用这对去进行加解密。

假如这里是在登录时对密码进行加密，那么在login.vue中

引入加解密的方法

import { encrypt, decrypt } from '@/utils/jsencrypt'

然后在点击了记住密码后，将密码加密存入cookie

          if (this.loginForm.rememberMe) {Cookies.set("username", this.loginForm.username, { expires: 30 });Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });}

那么在获取cookie时就可以调用解密方法获取密码。

    getCookie() {const username = Cookies.get("username");const password = Cookies.get("password");const rememberMe = Cookies.get('rememberMe')this.loginForm = {username: username === undefined ? this.loginForm.username : username,password: password === undefined ? this.loginForm.password : decrypt(password),rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)};},

Vue中前端加密使用RSA加密下的JSEncrypt防止明文暴露相关推荐

vue中使用js进行AES加密及解密（含密钥和iv偏移量）、以及HMAC-SHA256加密方法对于签名加密的使用
一.AES加密解密 1.下载安装 npm install crypto-js --save-dev 2.在utils文件夹下创建encryp.js文件进行aes加密解密工具类方法的封装 import ...
京东post登陆参数js分析，密码加密的RSA加密实现
老规矩先用错误信息登陆一下抓一下包,看看有那些post字段: uuid: cf0d4f92-c83b-451a-bc31-be4bf9c546a5eid: 5535JQZQ4ZUMHJEPDFQ7EI ...
html post密码加密,京东post登陆参数js分析，密码加密的RSA加密实现
老规矩先用错误信息登陆一下抓一下包,看看有那些post字段: uuid: cf0d4f92-c83b-451a-bc31-be4bf9c546a5eid: 5535JQZQ4ZUMHJEPDFQ7EI ...
linux 加密可逆,RSA加密是可逆的吗
java rsa加密可逆吗可逆.有秘钥就成. linux上RSA加密每次都变化吗加密解密的技术: 对称加密加密方和解密方使用是同一个密钥,加密解密的速度都很快,先将数据明文分成数据块儿,一般来讲 ...
AES加密和RSA加密详细原理及使用场景
部分RPC请求或者网络传输,需要对一些敏感数据进行加密传输. 误解当初错以为MD5.SHA1这些哈希算法就是加密算法后来在一些远程通信和网络传输的过程中,需要对一些敏感数据,经过再编码的方式,转换 ...
VC实现数据的加密和解密(MD5加密/DES/RSA加密解密)
VC实现数据的加密和解密由于生产实习的时间有限,加上自己这段时间致力于考研,因此,仅仅是实现了通过MD5/DES/RSA的简单的字符串的加密解密,希望有兴趣的兄弟姐妹能够完善它. 主要的程序如下: ...
vue中模糊搜索keyup在中文输入法下输入英文无效的解决方法
keyup事件在中文输入法下输入英文,vue中对应的val属性值为空.控制台显示并没有获取到任何值,但是input中确实有字母.纳尼?说好的双向绑定呢? 要解决这个问题可以采用watch+keyup事 ...
vue中给字段base 64加密
两种方法,一种是下载包 npm i --save js-base64 然后再组件中引用 const Base64 = require("js-base64").Base64 进行加 ...
vue中前端实现图片压缩 file文件
项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法将图片压缩的方法写到这 ...

Vue中前端加密使用RSA加密下的JSEncrypt防止明文暴露

场景

加密过程

实现

Vue中前端加密使用RSA加密下的JSEncrypt防止明文暴露相关推荐

最新文章

热门文章