脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue Des加密解密

详解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加密解密的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Vue3使用vue-office插件实现word预览功能

    Vue3使用vue-office插件实现word预览功能

    vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库,支持vue2和vue3,这篇文章主要介绍了Vue3使用vue-office插件实现word预览功能,需要的朋友可以参考下
    2024-04-04
  • Vue使用高德地图选点定位搜索定位功能实现

    Vue使用高德地图选点定位搜索定位功能实现

    这篇文章主要介绍了Vue使用高德地图选点定位搜索定位功能,文中给大家提到了常见问题解决方法，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-10-10
  • Springboot+Vue-Cropper实现头像剪切上传效果

    Springboot+Vue-Cropper实现头像剪切上传效果

    这篇文章主要为大家详细介绍了Springboot+Vue-Cropper实现头像剪切上传效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue3使用echart的两种引入方式以及注意事项说明

    vue3使用echart的两种引入方式以及注意事项说明

    这篇文章主要介绍了vue3使用echart的两种引入方式以及注意事项说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue3 element plus table selection展示数据,默认选中功能方式

    vue3 element plus table selection展示数据,默认选中功能方式

    这篇文章主要介绍了vue3 element plus table selection展示数据,默认选中功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 详解vue修改elementUI的分页组件视图没更新问题

    详解vue修改elementUI的分页组件视图没更新问题

    这篇文章主要介绍了详解vue修改elementUI的分页组件视图没更新问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Axios在vue项目中的封装步骤

    Axios在vue项目中的封装步骤

    Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，是一个第三方插件，第三方异步请求工具库，这篇文章主要介绍了Axios在vue项目中的封装方法,需要的朋友可以参考下
    2022-10-10
  • vue3动态监听浏览器窗口变化实例

    vue3动态监听浏览器窗口变化实例

    这篇文章主要给大家介绍了关于vue3动态监听浏览器窗口变化的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • 解决vue初始化项目时,一直卡在Project description上的问题

    解决vue初始化项目时,一直卡在Project description上的问题

    今天小编就为大家分享一篇解决vue初始化项目时,一直卡在Project description上的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 关于vue-router的使用及实现原理

    关于vue-router的使用及实现原理

    这篇文章主要介绍了关于vue-router的使用及实现原理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06

最新评论