前段页面跳转加密方法思路

前段页面跳转加密方法思路

主要思路是在使用Windows.open打开的时候，添加加密参数，尤其是时间戳加密参数，可以保障别人抓取页面也无法正常使用亦或者仅能一分钟内使用。

1.vue页面作为解密页面

使用的加密文件为crypto-js

import CryptoJS from "crypto-js"

1.1 获取传参加密密文

receivedParam = searchState.search.replace("?", "").toString()

1.2 解析加密密文

// 解析密文 
decryptedParam = decryptParam(receivedParam)

// 解密方法
function decryptParam(encryptedParam) {
  const key = "******" // 密钥，与加密时保持一致
  const decrypted = CryptoJS.AES.decrypt(encryptedParam, key).toString(CryptoJS.enc.Utf8) // CryptoJS的AES算法
  return JSON.parse(decrypted)
}

1.3 解析时间戳转换为日期格式 以分钟为节点

// 时间戳转日期格式

function formatDate(timestamp) {

  const date = new Date(timestamp)

  const year = date.getFullYear()

  const month = date.getMonth() + 1

  const day = date.getDate()

  const hours = date.getHours()

  const minutes = date.getMinutes()

  // const seconds = date.getSeconds()

  return `${year}-${month}-${day} ${hours}:${minutes}`

 }

1.4 根据 时间戳以及其他参数去实现页面的请求

if (decryptedParam.name === "undefined" || decryptedParam.name === "0") {

  console.log("未传参")

  // configUrl = `${process.env.BASE_URL}config/config.json?time=${new Date().getTime()}`

 } else {

  if (decryptedParam.name === "***" && currentTime === decryptedParamTime) {

   configUrl = `${process.env.BASE_URL}config/config.json?time=${new Date().getTime()}`

  }else if (decryptedParam.name === "***") { // 测试 json 测试结束后迁移到实际的代码上

   configUrl = `${process.env.BASE_URL}config/config_debug.json?time=${new Date().getTime()}`

  } else {

   console.log("============================")

  }

 }

1.5 在前段页面请求加密参数

1.5.1 JavaScript版本的加密

1.5.1.1 引入加密文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>

1.5.1.2 执行加密并请求

const key = "***" // 密钥，与加密时保持一致
// 请求参数
const decryptedParam = {
        name: "**",
        Layerid: "",
        curuntime: timeStamp
    }
const encryptedParam = CryptoJS.AES.encrypt(Param, key).toString();
window.open("Url?"+encryptedParam)