Vue 针对浏览器参数过长实现浏览器参数加密解密

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

function subString(data) {
  return data.length > 32 ? data.substring(0, 32) : data
}

/**
 * 序列化对象 并加密
 * @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 ? `?${subString(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
}