有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue 密码加密(加密/解密「rsa、aes」)实现方式

vue 炮渣日记 4周前 (11-12) 16次浏览 已收录 0个评论 扫描二维码

1、rsa非对称加/解密

安装jsencrypt.js 官网:
http://travistidwell.com/jsencrypt/

npm install jsencrypt

2、aes对称加/解密

安装crypto-js

npm install crypto-js

上面是第三方工具库的安装,开始进入使用了~

3、实际项目中的使用过程

第一步:登录页面处理

//**用到了 RSA 的加/解密**
import { encryptedRsaData, decryptedRsaData } from '@/utils/encrypt2'


//1、登录
 handleLogin() {
   this.$refs.form.validate(async (valid) => {
     if (valid)
       try {
         this.loading = true
         await this.login({
           username: this.form.username,
           password: md5(this.form.password),
         }).catch(() => {})
         //登录成功后
         await this.$router.push(this.handleRoute())
         await this.aesKeyDate() //调用aesKeyDate
       } finally {
         this.loading = false
       }
   })
 },
 
 // 2、aesKeyDate 主要是用于得到:用server公钥加密client公钥后的‘公钥’
 aesKeyDate() {
   //baseKey 是公钥(服务器端)
   this.baseKey = Base64.decode(this.publickey)
   this.publickeyClient =
     'LS9pb0tRktLS0tLQ==' //base64加密后的公钥(客户端)
   this.privatekeyClient ='LS0bkFjWS0tLS0t' //base64加密后的私钥(客户端)
   let clientPw = encryptedRsaData(this.baseKey, this.publickeyClient) 
   //rsa加密(用baseKey加密publickeyClient)==得到clientPw,请求getAesKey
   this.getAesKey({ clientPublic: clientPw }) //为了得到加密数据
},
  
 //3、getAesKey() 得到加密数据,存储起来,为了后面数据列表的解密
  async getAesKey(dataJson) {
    const { code, data } = await getAesKey(dataJson)
    //data是返回的加密数据
    if (code == 200) {
      let pkc = Base64.decode(this.privatekeyClient)//解密私钥(客户端)
      let aes_key_json = JSON.parse(decryptedRsaData(pkc, data)) //rsa解密
      localStorage.aes_key = aes_key_json.aes_key //得到aes_key,存到本地
      localStorage.iv = aes_key_json.iv //得到iv,存到本地
    }
  },

第二步:用AES 解密列表数据

//**用到了 AES 解密**
import { cryptoDecrypt } from '@/utils/crypto'

//异步得到getList数据的接口方法
async fetchData() {
  this.listLoading = true
  //data为加密的数据【数组】
  const { data } = await getList(this.queryForm)
  
  // data解密后为==deData数据
  //用cryptoDecrypt解密
  let deData = cryptoDecrypt(data, localStorage.aes_key, localStorage.iv) 
  const { list, total, key_world_list, user_source } = deData
  this.list = list
  this.total = total
  this.key_world_list = key_world_list
  this.user_source = user_source
  this.listLoading = false
},
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址