通过query传参，url上的值是明文展示，想对参数加密一下，这样就无法被手动修改一些值，提高安全性
如果在每次传参时单独做加密显得很麻烦，希望直接在router配置，不对其他组件做修改
1.安装crypto-js
npm install crypto-js
2.准备encryption.js和query.js
准备encryption.js文件，对加密解密进行封装
//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('1111111111111111') // 十六位数作为密钥，自行修改
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（与encryption.js同级），对url上参数进行加密解密
import {
getEncryptToBase64 as encrypt,
getDecryptByBase64 as decrypt,
} from './encryption'
const encodeReserveRE = /[!'()*]/g
const encodeReserveReplacer = (c) => '%' + c.charCodeAt(0).toString(16) //获取该字符的 ASCII 码值，再将其转换为十六进制字符串，并在前面加上 '%' 作为替换后的结果
const commaRE = /%2C/g //英文逗号处理
const encode = (str) =>
encodeURIComponent(str)
.replace(encodeReserveRE, encodeReserveReplacer)
.replace(commaRE, ',')
const decode = decodeURIComponent
/**
* 判断字符串是否是base64
* @param { string } str
* @returns { boolean }
*/
function isBase64(str) {
// 检查字符串是否为空或仅包含空白字符
if (!str || str.trim() === '') {
return false
}
// 正则表达式匹配Base64的字符集，允许末尾有0-2个等号用于填充
const base64Pattern = /^[A-Za-z0-9+/]*={0,2}$/
// 首先检查字符串是否符合Base64的字符集规范
if (!base64Pattern.test(str)) {
return false
}
try {
return btoa(atob(str)) === str
} catch (err) {
return false
}
}
/**
* 序列化对象 并加密
* @param {Object} obj
*/
export const stringifyQuery = (obj) => {
const res = obj
? Object.keys(obj)
.map((key) => {
const val = obj[key]
if (val === null || val === undefined) {
return encode(key)
}
if (Array.isArray(val)) {
const result = []
val.forEach((val2) => {
if (val2 === null || val2 === undefined) {
result.push(encode(key))
} else {
result.push(encode(key) + '=' + encode(val2))
}
})
return result.join('&')
}
return encode(key) + '=' + encode(val)
})
.join('&')
: null
return res ? `?${encrypt(res)}` : ''
}
/**
* 解密 反序列化字符串参数
* @param {String}} query
*/
export const parseQuery = (query) => {
const res = {}
query = query.trim().replace(/^(\?|#|&)/, '')
if (!query) {
return res
}
// 解密
query = isBase64(query) ? decrypt(query) : query
query.split('&').forEach((param) => {
const parts = param.split('=')
const key = decode(parts.shift())
const val = parts.length > 0 ? decode(parts.join('')) : null
if (res[key] === undefined) {
res[key] = val
} else if (Array.isArray(res[key])) {
res[key].push(val)
} else {
// 复原数组
res[key] = [res[key], val]
}
})
return res
}
3.对router进行配置，修改默认的stringifyQuery和parseQuery，使其使用我们query.js中封装的
import { stringifyQuery, parseQuery } from '../utils/query' //路径位置根据实际修改
const router = createRouter({
history: createWebHashHistory(),
stringifyQuery, // 序列化query参数
parseQuery, // 反序列化query参数
routes,
})
e172f119f6a84784b69c6037d073d0bf.png
组件内：正常传递与获取query，无需做额外修改
router.push({ name: 'test', query: { type:'create' } })
console.log(route.query.type) //create
