详解vue的Des加密解密

 更新时间:2022年9月16日 16:15  点击:181 作者:笨qiao先飞

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加密解密的资料请关注猪先飞其它相关文章!

原文出处:https://juejin.cn/post/7142763069536469028

[!--infotagslink--]

相关文章

  • 图解PHP使用Zend Guard 6.0加密方法教程

    有时为了网站安全和版权问题,会对自己写的php源码进行加密,在php加密技术上最常用的是zend公司的zend guard 加密软件,现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
  • vue中activated的用法

    这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
  • 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23
  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
  • Vue组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
  • Vue基于localStorage存储信息代码实例

    这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
  • vue 监听 Treeselect 选择项的改变操作

    这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
  • vue 获取到数据但却渲染不到页面上的解决方法

    这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09
  • vue项目多环境配置(.env)的实现

    最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
  • Vue 3.0中jsx语法的使用

    这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
  • vue项目页面嵌入代码块vue-prism-editor的实现

    这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30
  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18
  • 解决vue的router组件component在import时不能使用变量问题

    这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27
  • vue Treeselect下拉树只能选择第N级元素实现代码

    这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
  • vue实现同时设置多个倒计时

    这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
  • vue实现div单选多选功能

    这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
  • Ant design vue table 单击行选中 勾选checkbox教程

    这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25
  • vue treeselect获取当前选中项的label实例

    这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01