详解vue的Des加密解密

目录
  • 1.安装
  • 2.写工具类
  • 3.在需要的地方引用
  • 4.调用
  • 5.VUE的方式

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

(0)

相关推荐

  • vue项目中 使用 pako.js 解密 gzip加密字符串的代码详解

    前言 今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了 实现代码 poko.js可至Github下载 https://github.com/nodeca/pako or npm install pako import pako from 'pako' // 一个是加密:window.btoa(),一个是解密:window.atob() function decode(e

  • Ant Design Vue 走马灯实现单页多张图片轮播效果

    最近的项目有个需求是,这种单页多图一次滚动一张图片的轮播效果,项目组件库是antd 然而用了antd的走马灯是这样子的 我们可以看到官网给的api是没有这种功能,百度上也多是在css上动刀,那样也就毕竟繁琐了,我们是什么?我们是程序猿啊,程序猿就该有程序猿的样子,怎么能写繁琐的东西呢,那还怎么为公司项目提高效率!!!(我哪敢说是为了摸鱼啊) 为了追求摸鱼的真谛我仔细查阅了文档https://github.com/vueComponent/ant-design-vue/blob/master/co

  • Vue中使用crypto-js AES对称加密算法实现加密解密

    目录 下载crypto-js 加密解密数据 AES算法的ECB模式加密-设置秘钥 AES算法的CBC模式加密-设置秘钥和偏移量 参考: 在数字加密算法中,通过可划分为对称加密和非对称加密 对称加密:如AES,DES,3DES 含义:加密和解密使用的是同一把钥匙.密钥不能在网络中传输,避免被拦截.如果要传输,必须要对密钥进行非对称加密再加密一次. 优点:算法简单,加密解密容易,效率高,执行快. 缺点:相对来说不算特别安全,只有一把钥匙,密文如果被拦截,且密钥也被劫持,那么,信息很容易被破译. 非对

  • vue生命周期beforeDestroy和destroyed调用方式

    目录 生命周期beforeDestroy和destroyed调用 情境一 情景二 beforeDestroy和destroyed生命周期函数的特点 生命周期beforeDestroy和destroyed调用 情境一 离开当前路由,会直接调用: 当前路由不使用 缓存,离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 情景二 离开当前路由,不会直接调用,需要程序控制调用: 当前路由使用 缓存,离开当前路由不会直接调用 beforeDestroy 和 befor

  • VueJs里利用CryptoJs实现加密及解密的方法示例

    第一步 安装 安装crypto-js 第二步 创建 在js文件目录下创建一个js文件secret /** * 对页面上输入的密码进行加密传输给后台进行验证,对返回的数据进行解密,在页面展示 */ let CryptoJS = require('crypto-js'); // 引入AES源码js export default { /* * 对密码进行加密,传输给后台进行验证 * @param {String} word 需要加密的密码 * @param {String} keyStr 对密码加密的

  • vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)

    vue项目中使用AES实现密码加密解密 区别 ECB:是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文. CBC:是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度.(不容易主动攻击,安全性好于ECB,是SSL.IPSec的标准) 代码实现 先安装 crypto-js npm install crypto-js --save-dev ECB模式: import CryptoJS from "cryp

  • 详解vue的Des加密解密

    目录 1.安装 2.写工具类 3.在需要的地方引用 4.调用 5.VUE的方式 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. 如果你是用于浏览器没有问题,你可以这样安

  • python实现DES加密解密方法实例详解

    本文实例讲述了python实现DES加密解密方法.分享给大家供大家参考.具体分析如下: 实现功能:加密中文等字符串 密钥与明文可以不等长 这里只贴代码,加密过程可以自己百度,此处python代码没有优化 1. desstruct.py DES加密中要使用的结构体 ip= (58, 50, 42, 34, 26, 18, 10, 2, 60, 52, 44, 36, 28, 20, 12, 4, 62, 54, 46, 38, 30, 22, 14, 6, 64, 56, 48, 40, 32,

  • 详解PHP的Sodium加密扩展函数

    目录 参考文档 Sodium 扩展在 PHP7.2 后是跟随 PHP 源码一起发布的,只需要在编译的时候加上 --with-sodium 即可安装成功.如果是 PHP7.2 之前的版本,需要单独安装这个扩展.同时,操作系统中也需要安装 libsodium-devel 库. AEAD_AES_256_GCM 加解密 首先是这个 AEAD_AES_256_GCM 加解密能力函数的应用.在微信支付相关的开发中,有一个接口就是使用的这种方式进行数据加密,在官方文档中,也提供了 PHP 对应的解密方式,其

  • PHP中加密解密函数与DES加密解密实例

    本文实例讲述了PHP中加密解密函数与DES加密解密的应用,分享给大家供大家参考.具体如下: 例子,php加密解密的例子 加密函数: 复制代码 代码如下: /* *功能:对字符串进行加密处理 *参数一:需要加密的内容 *参数二:密钥 */ function passport_encrypt($str,$key){ //加密函数  srand((double)microtime() * 1000000);  $encrypt_key=md5(rand(0, 32000));  $ctr=0;  $t

  • 详解vue 模版组件的三种用法

    本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&

  • 详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • Java实现的DES加密解密工具类实例

    本文实例讲述了Java实现的DES加密解密工具类.分享给大家供大家参考,具体如下: 一个工具类,很常用,不做深入研究了,那来可直接用 DesUtil.java package lsy; import java.security.Key; import java.security.SecureRandom; import javax.crypto.Cipher; import javax.crypto.KeyGenerator; import javax.crypto.SecretKey; imp

  • asp.net实现的DES加密解密操作示例

    本文实例讲述了asp.net实现的DES加密解密操作.分享给大家供大家参考,具体如下: //加密方法 private string encrypt(string strToEncrypt) { if (strToEncrypt == null || strToEncrypt == "") return strToEncrypt; DESCryptoServiceProvider des = new DESCryptoServiceProvider(); //把字符串放到byte数组中,

  • PHP简单实现DES加密解密的方法

    本文实例讲述了PHP简单实现DES加密解密的方法.分享给大家供大家参考,具体如下: des加密: function des_encrypt($str, $key) { $block = mcrypt_get_block_size('des', 'ecb'); $pad = $block - (strlen($str) % $block); $str .= str_repeat(chr($pad), $pad); return mcrypt_encrypt(MCRYPT_DES, $key, $s

  • php实现和c#一致的DES加密解密实例

    PHP实现和c#一致的DES加密解密,可以从网上搜到一大堆,但是测试后发现都没法用.以下正确代码是我经过苦苦才找到的.希望大家在系统整合时能用的上. 注意:key的长度为8位以内. //C# 版DES 加解密算法 using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web

随机推荐