詳解vue的Des加密解密
1.安裝
npm install crypto-js@3.3.0 --save-dev
這樣是安裝固定版本3.3.0的Des加密包,為什么這樣安裝呢? 因?yàn)槟闶怯糜谛〕绦蜃钚掳姹镜臅?huì)有問(wèn)題出現(xiàn)下面的錯(cuò)誤,這個(gè)模塊來(lái)自瀏覽器,小程序沒(méi)有這個(gè)模塊
Native crypto module could not be used to get secure random number.

如果你是用于瀏覽器沒(méi)有問(wèn)題,你可以這樣安裝
npm install crypto-js --save-dev
2.寫(xiě)工具類
(如果你不是和下面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;
}
留一個(gè)疑問(wèn)如果你問(wèn)我3Des加密key16位可以嗎?我說(shuō)可以,那報(bào)錯(cuò)怎么辦?
更多關(guān)于vue Des加密解密的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue3使用vue-office插件實(shí)現(xiàn)word預(yù)覽功能
vue-office是一個(gè)支持多種文件(docx、.xlsx、pdf)預(yù)覽的vue組件庫(kù),支持vue2和vue3,這篇文章主要介紹了Vue3使用vue-office插件實(shí)現(xiàn)word預(yù)覽功能,需要的朋友可以參考下2024-04-04
Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)
這篇文章主要介紹了Vue使用高德地圖選點(diǎn)定位搜索定位功能,文中給大家提到了常見(jiàn)問(wèn)題解決方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果
這篇文章主要為大家詳細(xì)介紹了Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明
這篇文章主要介紹了vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue3?element?plus?table?selection展示數(shù)據(jù),默認(rèn)選中功能方式
這篇文章主要介紹了vue3?element?plus?table?selection展示數(shù)據(jù),默認(rèn)選中功能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題
這篇文章主要介紹了詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue3動(dòng)態(tài)監(jiān)聽(tīng)瀏覽器窗口變化實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3動(dòng)態(tài)監(jiān)聽(tīng)瀏覽器窗口變化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
解決vue初始化項(xiàng)目時(shí),一直卡在Project description上的問(wèn)題
今天小編就為大家分享一篇解決vue初始化項(xiàng)目時(shí),一直卡在Project description上的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
關(guān)于vue-router的使用及實(shí)現(xiàn)原理
這篇文章主要介紹了關(guān)于vue-router的使用及實(shí)現(xiàn)原理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06

