vue+RSA加解密(幼儿理解级)
栗子在下面:
步骤:
1安装jsencrypt和encryptlong
终端里面安装:-_-||
npm install jsencrypt --save-dev
npm i encryptlong -S
2.创建js:utils文件下创建一个新文件放一个RSA.js文件:
js文件代码:
/* 产引入jsencrypt实现数据RSA加密 */// import JSEncrypt from 'jsencrypt' // 处理长文本数据时报错 jsencrypt.js Message too long for RSA/* 产引入encryptlong实现数据RSA加密 */import Encrypt from 'encryptlong' // encryptlong是基于jsencrypt扩展的长文本分段加解密功能。// 密钥对生成 http://web.chacuo.net/netrsakeypairimport JSEncrypt from 'jsencrypt/bin/jsencrypt.min'// 密钥对生成 http://web.chacuo.net/netrsakeypairconst 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) // 对数据进行解密}
3.然后在你需要用到的页面使用它
页面单独引入import { decrypt, encrypt } from '../../../utils/rsa'使用方式: const a = '你好adsfafsdfadfe' const b = encrypt(a) console.log(b) const c = decrypt(b) console.log(c) console.log('加密前:' + JSON.stringify(a)) const data = encrypt(a) console.log('加密后:' + data) const jsn = decrypt(data) console.log('解密后:' + jsn)
这边import那一行写在
import { decrypt, encrypt } from '../../../utils/rsa'export default { }
然后加解密的地方就看你使用的地方是哪里就放在他那里就行了。一般是用在登录那边。或者数据渲染那边吧。
如果要试试我的案例,就把使用方式放在这里面:
encrypt('加密的数据') decrypt('解密的数据')
mounted(){ const a = '你好adsfafsdfadfe' const b = encrypt(a) console.log(b) const c = decrypt(b) console.log(c) console.log('加密前:' + JSON.stringify(a)) const data = encrypt(a) console.log('加密后:' + data) const jsn = decrypt(data) console.log('解密后:' + jsn)}
当然了,如果不行的话,就在main那边写个全局引入方法:(这一步可有可无我觉得)
import Rsa from "@/utils/rsa.js"Vue.prototype.Rsa = Rsa // 将Rsa注册为公共方法,方便其他页面调用
创作打卡挑战赛 赢取流量/现金/CSDN周边激励大奖