Vue 针对浏览器参数过长实现浏览器参数加密解密的操作方法
作者：沉默是金~
文章介绍了如何在Vue项目中使用crypto-js库对浏览器参数进行加密和解密,以解决参数过长的问题,在router/index.js中添加了相关代码,并在utils工具类中添加了encryption.js和query.js源码,感兴趣的朋友一起看看吧
1、首先安装crypto-js
npm install crypto-js
1、在router/index.js中添加如下代码
在utils工具类添加如下
encryption.js源码
import CryptoJS from 'crypto-js'
import CryptoJSCore from 'crypto-js/core'
import AES from 'crypto-js/aes'
import ZeroPadding from 'crypto-js/pad-zeropadding'
import Utf8, { parse } from 'crypto-js/enc-utf8'
import Base64 from 'crypto-js/enc-base64'
/*
* 加密 解密
*/
const keyHex = parse('1234567890123456') // 十六位数作为密钥，自行修改
const ivHex = CryptoJS.lib.WordArray.random(128 / 8) // 十六位数作为密钥偏移量 随机生成
/**
* 加密
* @param {String} key
* @returns {string}
*/
// 加密后的结果通常是一个CipherParams对象，其中包含了加密后的密文数据，而密文数据本身是一个WordArray对象。同样，在解密过程中，解密后的结果也是一个WordArray对象。
export const getEncrypt = (key) => {
try {
key = JSON.stringify(key)
} catch (e) {
console.warn(e)
}
// key需要是WordArray类型
return JSON.stringify({
encrypt: AES.encrypt(key, keyHex, {
mode: CryptoJSCore.mode.CBC,
padding: ZeroPadding,
iv: ivHex,
}).toString(),
iv: ivHex,
})
}
/**
* 加密后转base64
* @param {String}} key
*/
export const getEncryptToBase64 = (key) => {
const encryptStr = getEncrypt(key)
const wordArray = Utf8.parse(encryptStr) //转为WordArray对象
return Base64.stringify(wordArray)
}
/**
* 解密
* @param data
* @returns {string}
*/
export const getDecrypt = (data) => {
let { encrypt, iv } = JSON.parse(data)
let decrypted = AES.decrypt(
{
ciphertext: Base64.parse(encrypt),
},
keyHex,
{
mode: CryptoJSCore.mode.CBC,
padding: ZeroPadding,
iv: iv,
}
).toString(Utf8) //转换为指定编码的字符串
try {
decrypted = JSON.parse(decrypted)
} catch (e) {
console.warn(e)
}
return decrypted
}
/**
* 对base64数据解密 先解析base64，在做解密
* @param {String} data
* @returns {string}
*/
export const getDecryptByBase64 = (data) => {
// 将Base64字符串转换为WordArray
const parsedWordArray = Base64.parse(data)
// WordArray对象转换成一个UTF-8编码的字符串
const decryptStr = Utf8.stringify(parsedWordArray)
return getDecrypt(decryptStr)
}query.js源码
import CryptoJS from 'crypto-js'
import CryptoJSCore from 'crypto-js/core'
import AES from 'crypto-js/aes'
import ZeroPadding from 'crypto-js/pad-zeropadding'
import Utf8, { parse } from 'crypto-js/enc-utf8'
import Base64 from 'crypto-js/enc-base64'
/*
* 加密 解密
*/
const keyHex = parse('1234567890123456') // 十六位数作为密钥，自行修改
const ivHex = CryptoJS.lib.WordArray.random(128 / 8) // 十六位数作为密钥偏移量 随机生成
/**
* 加密
* @param {String} key
* @returns {string}
*/
// 加密后的结果通常是一个CipherParams对象，其中包含了加密后的密文数据，而密文数据本身是一个WordArray对象。同样，在解密过程中，解密后的结果也是一个WordArray对象。
export const getEncrypt = (key) => {
try {
key = JSON.stringify(key)
} catch (e) {
console.warn(e)
}
// key需要是WordArray类型
return JSON.stringify({
encrypt: AES.encrypt(key, keyHex, {
mode: CryptoJSCore.mode.CBC,
padding: ZeroPadding,
iv: ivHex,
}).toString(),
iv: ivHex,
})
}
/**
* 加密后转base64
* @param {String}} key
*/
export const getEncryptToBase64 = (key) => {
const encryptStr = getEncrypt(key)
const wordArray = Utf8.parse(encryptStr) //转为WordArray对象
return Base64.stringify(wordArray)
}
/**
* 解密
* @param data
* @returns {string}
*/
export const getDecrypt = (data) => {
let { encrypt, iv } = JSON.parse(data)
let decrypted = AES.decrypt(
{
ciphertext: Base64.parse(encrypt),
},
keyHex,
{
mode: CryptoJSCore.mode.CBC,
padding: ZeroPadding,
iv: iv,
}
).toString(Utf8) //转换为指定编码的字符串
try {
decrypted = JSON.parse(decrypted)
} catch (e) {
console.warn(e)
}
return decrypted
}
/**
* 对base64数据解密 先解析base64，在做解密
* @param {String} data
* @returns {string}
*/
export const getDecryptByBase64 = (data) => {
// 将Base64字符串转换为WordArray
const parsedWordArray = Base64.parse(data)
// WordArray对象转换成一个UTF-8编码的字符串
const decryptStr = Utf8.stringify(parsedWordArray)
return getDecrypt(decryptStr)
}到此这篇关于Vue 针对浏览器参数过长实现浏览器参数加密解密的文章就介绍到这了,更多相关vue浏览器参数加密解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！