vue的Des加密解密怎么實(shí)現(xiàn)

這篇文章主要介紹了vue的Des加密解密怎么實(shí)現(xiàn)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue的Des加密解密怎么實(shí)現(xiàn)文章都會(huì)有所收獲，下面我們一起來看看吧。

1.安裝

npm install crypto-js@3.3.0 --save-dev

這樣是安裝固定版本3.3.0的Des加密包，為什么這樣安裝呢？ 因?yàn)槟闶怯糜谛〕绦蜃钚掳姹镜臅?huì)有問題出現(xiàn)下面的錯(cuò)誤，這個(gè)模塊來自瀏覽器，小程序沒有這個(gè)模塊

Native crypto module could not be used to get secure random number.

如果你是用于瀏覽器沒有問題，你可以這樣安裝

npm install crypto-js --save-dev

2.寫工具類

（如果你不是和下面java相對(duì)應(yīng)的請(qǐng)看 5）

在Vue 的目錄下創(chuàng)建一個(gè)DES.js的文件，

這里是特殊的一種和java相對(duì)應(yīng)

下面列出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) => {
//這里根據(jù)自己的需求去選擇那一種方式   我使用的是下面這倆種適合我的業(yè)務(wù)
	//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解密的時(shí)候 出現(xiàn)了

malformed utf-8 data

這個(gè)錯(cuò)誤，所以我把解密方法改成下面這種

//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 下面只放了一個(gè)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.調(diào)用

encryptDes("我這里放的是16進(jìn)制的字符串需要加密的data","我這里放的是16進(jìn)制的字符串key")

des加密的key有要求 必須是8的倍數(shù)位的 3des的是24位的（這里也是8的倍數(shù)但是不能是16位的）

這里我就不做測(cè)試了，大家自己測(cè)試就好

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;
}

關(guān)于“vue的Des加密解密怎么實(shí)現(xiàn)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue的Des加密解密怎么實(shí)現(xiàn)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。