【javascript】实现地址栏参数简单加密

加密方案

添加n位随机数后后，使用base64转码

获取n位随机数

/**
 * 获取唯一随机数
 * @type {*[]}
 */
let randomArr = []

function getRandomNum(length = 32) {
  let num = parseInt(Math.random() * 20000);
  if (randomArr.indexOf(num) === -1) {
    let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    let num = '';
    for (let i = 0; i < length; i++) {
      num += arr[parseInt(Math.random() * arr.length)];
    }
    randomArr.push(num);
    return num
  } else {
    return getRandomNum()
  }
}

参数转码

/**
 * 地址带参：参数转码
 * 添加12位随机数后，使用base64转码
 */
function setParam(param) {
  let result = ""
  let tag = 0
  for (let i in param) {
    result += ((!tag ? "&" : "") + i + "=" + getRandomNum(12) + '' + param[i]);
  }
  return window.btoa(result)
}

参数解码

/**
 * 地址带参：参数解码
 * 解码 base64 后, 截取数据
 * @param value
 */
function getParam(value) {
  const str = unescape(value)
  const arr = (window.atob(str) || "").split("&");
  let param = {}
  arr.map(item => {
    if (item) {
      const [key, value] = item.split("=")
      param[key] = value.substring(12)
    }
  })
  return param
}

vue文件中使用

// 加密
const t = setParam({ id: "JKNMJUDiPso", type: 1 })
router.push({ path: "/path", query: { t } })
// 解密
const { id, type} = getParam(route.query.t)
console.log(id, type)