npm install crypto-js
单独在js中封装一个js存放这个方法,后期使用再引入
import CryptoJS from 'crypto-js';
let aesKeyInfo = {
key: '0123456789abcdef',
iv: 'abcdef0123456789', // 密钥偏移量,16个字符
};
let desKeyInfo = {
key: '0123456789abcdef',
iv: 'abcdef0123456789', // 密钥偏移量,16个字符
};
let defaultAesMode = CryptoJS.mode.CBC;
let defaultAesPadding = CryptoJS.pad.Pkcs7;
let defaultDesMode = CryptoJS.mode.CBC;
let defaultDesPadding = CryptoJS.pad.Pkcs7;
/** 设置aes默认的密钥和偏移量 */
export function setDefaultAesKeyInfo(keyInfo) {
aesKeyInfo = keyInfo;
}
/** 设置默认的密钥和偏移量 */
export function setDefaultDesKeyInfo(keyInfo) {
desKeyInfo = keyInfo;
}
/** 设置默认aes加密模式 */
export function setDefaultAesMode(mode) {
defaultAesMode = mode;
}
/** 设置默认aes padding模式 */
export function setDefaultAesPadding(padding) {
defaultAesPadding = padding;
}
/** 设置默认des加密模式 */
export function setDefaultDesMode(mode) {
defaultDesMode = mode;
}
/** 设置默认des padding模式 */
export function setDefaultDesPadding(padding) {
defaultDesPadding = padding;
}
/**
* 加密aes字符串
*/
function encodeAesString(data, { key = aesKeyInfo.key, iv = aesKeyInfo.iv, mode = defaultAesMode, padding = defaultAesPadding, } = {
key: aesKeyInfo.key,
iv: aesKeyInfo.iv,
mode: defaultAesMode,
padding: defaultAesPadding,
}) {
const encrypted = CryptoJS.AES.encrypt(data, CryptoJS.enc.Utf8.parse(key), {
iv: CryptoJS.enc.Utf8.parse(iv),
mode,
padding,
});
return encrypted.toString(); // 返回的是base64格式的密文
}
/**
* 解密aes字符串
*/
function decodeAesString(encrypted, { key = aesKeyInfo.key, iv = aesKeyInfo.iv, mode = defaultAesMode, padding = defaultAesPadding, } = {
key: aesKeyInfo.key,
iv: aesKeyInfo.iv,
mode: defaultAesMode,
padding: defaultAesPadding,
}) {
const decrypted = CryptoJS.AES.decrypt(encrypted, CryptoJS.enc.Utf8.parse(key), {
iv: CryptoJS.enc.Utf8.parse(iv),
mode,
padding,
});
return decrypted.toString(CryptoJS.enc.Utf8); // 返回解密后的原文
}
/** AES对称加密解密 */
const aes = {
en: encodeAesString,
de: decodeAesString,
};
/** 加密des字符串 */
const encodeDesString = function (data, { key = desKeyInfo.key, iv = desKeyInfo.iv, mode = defaultDesMode, padding = defaultDesPadding, } = {
key: desKeyInfo.key,
iv: desKeyInfo.iv,
mode: defaultDesMode,
padding: defaultDesPadding,
}) {
var encrypted = CryptoJS.DES.encrypt(data, CryptoJS.enc.Utf8.parse(key), {
iv: CryptoJS.enc.Utf8.parse(iv),
mode,
padding,
});
return encrypted.toString();
};
/**
* 解密des字符串
*/
function decodeDesString(data, { key = desKeyInfo.key, iv = desKeyInfo.iv, mode = defaultDesMode, padding = defaultDesPadding, } = {
key: desKeyInfo.key,
iv: desKeyInfo.iv,
mode: defaultDesMode,
padding: defaultDesPadding,
}) {
const decrypted = CryptoJS.DES.decrypt(data, CryptoJS.enc.Utf8.parse(key), {
iv: CryptoJS.enc.Utf8.parse(iv),
mode,
padding,
});
return decrypted.toString(CryptoJS.enc.Utf8); // 返回解密后的原文
}
/** Des对称加密解密 */
const des = {
en: encodeDesString,
de: decodeDesString,
};
/** BASE64转码 */
const base64 = {
en: (data) => CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(data)),
de: (data) => CryptoJS.enc.Base64.parse(data).toString(CryptoJS.enc.Utf8),
};
/** SHA256摘要 */
const sha256 = (data) => {
return CryptoJS.SHA256(data).toString();
};
/** md5摘要 */
const md5 = (data) => {
return CryptoJS.MD5(data).toString();
};
// 导出可用方法
export { aes, des, md5, sha256, base64, decodeAesString, encodeAesString, decodeDesString, encodeDesString }
1、 写入vue项目根目录下的main.js中,实现全局注册使用
import Vue from "vue";
import App from "./App.vue";
// 引入暴露出的加密解密方法这里以DES为例
import {
setDefaultDesKeyInfo,
encodeDesString,
decodeDesString,
} from "@/utils/index";
// 设置和后端对应的key和偏移量
setDefaultDesKeyInfo({ key: "写入密钥", iv: "写入偏移量" });
// 将解密和解密方法挂在vue原型上
Vue.prototype.$jiami = encodeDesString;
Vue.prototype.$jiemi = decodeDesString;
2、调用方法
测试解密
加密前:我是无敌大帅哥
加密后:{{ text }}
根据和后端商议的算法来决定你要使用的方法,个人觉得目前用的比较多是AES和DES
本篇文章比较注重实操,如果帮到了你,请你帮我点赞,原创不易。