详解vue的Des加密解密
更新时间：2022年09月14日 16:52:25 作者：笨qiao先飞
这篇文章主要为大家介绍了vue的Des加密解密使用实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
1.安装
npm install crypto-js@3.3.0 --save-dev
这样是安装固定版本3.3.0的Des加密包，为什么这样安装呢？ 因为你是用于小程序最新版本的会有问题出现下面的错误，这个模块来自浏览器，小程序没有这个模块
Native crypto module could not be used to get secure random number.
如果你是用于浏览器没有问题，你可以这样安装
npm install crypto-js --save-dev
2.写工具类
（如果你不是和下面java相对应的请看 5）
在Vue 的目录下创建一个DES.js的文件，
这里是特殊的一种和java相对应
下面列出java的加密方式 **
//java
private void des(byte[] data, byte[] desKey) {
try {
SecretKey key = new SecretKeySpec(desKey, "DES");
Cipher c1 = Cipher.getInstance("DES" + "/ECB/NoPadding");
c1.init(Cipher.ENCRYPT_MODE, key);
byte[] ret = c1.doFinal(data);
} catch (Exception ignored) {
ignored.printStackTrace();
}
}
//vue
import cryptoJs from 'crypto-js';
//DES加密
export const encryptDes = (message, key) => {
//这里根据自己的需求去选择那一种方式 我使用的是下面这俩种适合我的业务
//message = cryptoJs.enc.Hex.parse(message)
//key = cryptoJs.enc.Hex.parse(key)
var keyHex = cryptoJs.enc.Utf8.parse(key)
var option = {
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.NoPadding //填充模式
}
var encrypted = cryptoJs.DES.encrypt(message, key, option)
return encrypted.ciphertext.toString()
}
//DES解密
export const decryptDes = (message, key) => {
var keyHex = cryptoJs.enc.Utf8.parse(key)
var decrypted = cryptoJs.DES.decrypt(
{
ciphertext: cryptoJs.enc.Hex.parse(message)
},
keyHex,
{
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.NoPadding //填充模式
}
)
return decrypted.toString(cryptoJs.enc.Utf8)
}
我自己在使用上面Des解密的时候 出现了
malformed utf-8 data
这个错误，所以我把解密方法改成下面这种
//DES解密
export const decryptDes = (message, key) => {
var keyHex = cryptoJs.enc.Hex.parse(key)
var decrypted = cryptoJs.DES.decrypt({
ciphertext: cryptoJs.enc.Hex.parse(message)
},
keyHex, {
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.NoPadding
}
)
return decrypted.toString()
}
3DES加解密：
只是单纯的把cryptoJs.DES 修改为cryptoJs.TripleDES 下面只放了一个3des加密的代码，解密和上面的同理 选择自己最合适的方式
//3Des加密
export const encrypt3Des = (message, key) => {
message = cryptoJs.enc.Hex.parse(message)
key = cryptoJs.enc.Hex.parse(key)
var option = {
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.NoPadding
}
var encrypted = cryptoJs.TripleDES.encrypt(message, key, option)
return encrypted.ciphertext.toString()
}
3.在需要的地方引用
import {
encryptDes,
decryptDes,
encrypt3Des,
decrypt3Des
} from "你工具类的路径"
4.调用
encryptDes("我这里放的是16进制的字符串需要加密的data","我这里放的是16进制的字符串key")
des加密的key有要求 必须是8的倍数位的 3des的是24位的（这里也是8的倍数但是不能是16位的）
这里我就不做测试了，大家自己测试就好
5.VUE的方式
//DES加密
export const encryptDes = (message, key) => {
var keyHex = cryptoJs.enc.Utf8.parse(key);
var encrypted = cryptoJs.DES.encrypt(message, keyHex, {
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.NoPadding
});
return encrypted.ciphertext.toString();
}
//DES解密
export const decryptDes = (ciphertext, key) => {
var keyHex = cryptoJs.enc.Utf8.parse(key);
var decrypted = cryptoJs.DES.decrypt({
ciphertext: cryptoJs.enc.Hex.parse(ciphertext)
}, keyHex, {
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.NoPadding
});
var result_value = decrypted.toString(cryptoJs.enc.Utf8);
return result_value;
}
留一个疑问如果你问我3Des加密key16位可以吗？我说可以，那报错怎么办？
更多关于vue Des加密解密的资料请关注脚本之家其它相关文章！
相关文章
Vue CompositionAPI中watch和watchEffect的区别详解
这篇文章主要为大家详细介绍了Vue CompositionAPI中watch和watchEffect的区别，文中的示例代码简洁易懂，希望对大家学习Vue有一定的帮助2023-06-06
假设 App 的用户可以在短时间内进行多个 API 调用,但您只想显示上次调用的结果,之前正在进行的请求变得无关紧要,在这种情况下,您可以利用 Axios 拦截器,本文给大家介绍了如何使用Axios拦截器中止Vue请求,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了Vue的生命周期，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)
这篇文章主要给大家介绍了关于如何巧用Vue.extend继承组件实现el-table双击可编辑的相关资料,不使用v-if、v-else,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue使用微信扫一扫功能的实现代码,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了vue+Element-ui前端实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
less是css预处理器,对原先css进行了扩展和补充,下面这篇文章主要给大家介绍了关于vue2中less的安装以及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue实现简易选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了Vue3之路由的query参数和params参数用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue中提示$index is not defined错误的解决方式
这篇文章主要介绍了vue中提示$index is not defined错误的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论