Vue中使用AES加密数据

最新推荐文章于 2024-07-03 15:49:04 发布

张飞飞啦啦

最新推荐文章于 2024-07-03 15:49:04 发布

阅读量953

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_55959870/article/details/129433825

版权

该文章展示了如何在Vue.js应用中结合ElementUI，使用CryptoJS库进行AES加密和解密操作。代码示例包括安装CryptoJS，定义加密和解密函数，以及在Vue组件中实际调用这些方法对文本进行加解密。

摘要由CSDN通过智能技术生成

前端

要引用elementui和 CryptoJS

//安装
npm install crypto-js --save-dev

import CryptoJS from 'crypto-js';
 	//向量
//密钥
const key = CryptoJS.enc.Utf8.parse("1234567890123456");
//向量
const iv = CryptoJS.enc.Utf8.parse("abcdefghijklmnop");
export default {
    //加密
    encrypt(word) {
				let srcs = CryptoJS.enc.Utf8.parse(word);
				//设置加密密钥、向量、类型、填充
				let encrypted = CryptoJS.AES.encrypt(srcs, key, {
						iv: iv,
						mode: CryptoJS.mode.ECB,
						padding: CryptoJS.pad.Pkcs7
				});
				//返回Base64的密文
				return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
    },
    //解密
    decrypt(word) {
       //接收密文转Base64
			let encryptedBaseStr = CryptoJS.enc.Base64.parse(word);
			let srcs = CryptoJS.enc.Base64.stringify(encryptedBaseStr);
			let decrypt = CryptoJS.AES.decrypt(srcs, key, {
					iv: iv,
					mode: CryptoJS.mode.ECB,
					padding: CryptoJS.pad.Pkcs7
			});
			let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
			return decryptedStr.toString();
    }
}

vue 页面中去使用

<template>
  <div id="app">
    <div>
      <el-input type="textarea"
                v-model="test1"
                style="display:inline-block"></el-input>
      <el-button type="primary"
                 @click="submitForm(test1)">加密</el-button>
      <el-button type="primary"
                 @click="resetForm(test1)">解密</el-button>
    </div>
    <div>
      <el-input type="textarea"
                v-model="test2"></el-input>
    </div>

  </div>
</template>

<script>
import AES from "@/common/AES.js";
export default {
  name: 'App',
  data () {
    return {
      test1: '',
      test2: '',
    }
  },
  created () {
    // //加密 encrypt
    // var encrypts = AES.encrypt(JSON.stringify(cars));
    // //加密 encrypt
    // var dess = JSON.parse(AES.decrypt(encrypts));
  },
  methods: {
    //加密
    submitForm (str) {
      this.test2 = AES.encrypt(str)
    },
    //解密
    resetForm (str) {
      debugger
      this.test2 = AES.decrypt(str);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>