> 文档中心 > vue+RSA加解密(幼儿理解级)

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注册为公共方法,方便其他页面调用

vue+RSA加解密(幼儿理解级) 创作打卡挑战赛 vue+RSA加解密(幼儿理解级) 赢取流量/现金/CSDN周边激励大奖