html引入vue.js DES加密、解密

https://www.bootcdn.cn/crypto-js/
标准的js加密库下载crypto-js文件，里面还有更多其他加密方法的文件，今天主要是使用des加密

新建crypto-js.js：

const key = CryptoJS.enc.Utf8.parse("hbxxcxhdlm"); // 十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse("hbxxjyjt");  // 十六位十六进制数作为密钥偏移量 CBC模式下用到, ECB模式不用

// 解密方法
// DES解密算法, 必须为base64格式才能解密，如果为16进制，需要先转为base64
function Decrypt(word) {
  let decrypt = CryptoJS.DES.decrypt(word, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return decrypt.toString(CryptoJS.enc.Utf8);
}

// 加密方法
function Encrypt(word) {
  var srcs = CryptoJS.enc.Utf8.parse(word);
  var encrypted = CryptoJS.DES.encrypt(srcs, key, {
    mode: CryptoJS.mode.CBC, // 加密模式
    padding: CryptoJS.pad.Pkcs7, // 填充方式
    iv: iv // 偏移向量
  });
  return encrypted.toString();
}

export const DC = (message) => {
  // console.log("测试测测试测试");
  // console.log(message);
  // console.log(message instanceof Array);
  var obj = {}
  if (typeof message == 'object') {
    // console.log("是对象或者数组");
    for (let i in message) {
      if (typeof message[i] == 'object') {
        for (let j in message[i]) {
          if (typeof message[i][j] == 'object') {
            // console.log("三维");
            // console.log(message[i][j]);
            for (let x in message[i][j]) {
              if (typeof message[i][j][x] == 'object') {
                // console.log("四维");
                for (let k in message[i][j][x]) {
                  if (typeof message[i][j][x][k] == 'object') {
                    for (let l in message[i][j][x][k]) {
                      message[i][j][x][k][l] = decryptDes(
                        message[i][j][x][k][l]
                      )
                    }
                  } else {
                    // console.log(message[i][j][x][k]);
                    message[i][j][x][k] = decryptDes(message[i][j][x][k])
                    // console.log(message[i][j][x][k]);
                  }
                }
              } else {
                message[i][j][x] = decryptDes(message[i][j][x])
              }
            }
          } else {
            // console.log("二维");
            message[i][j] = decryptDes(message[i][j])
            // console.log(message[i][j])
          }
        }
      } else {
        message[i] = decryptDes(message[i])
      }
    }
  } else {
    // console.log("是字符串");
    message = decryptDes(message)
  }

  return message
}

export const EC = (message) => {
  if (typeof message == 'object') {
    for (let i in message) {
      if (typeof message[i] == 'object') {
        for (let j in message[i]) {
          if (typeof message[i][j] == 'object') {
            for (let x in message[i][j]) {
              message[i][j][x] = encryptDes(message[i][j][x])
            }
          } else {
            message[i][j] = encryptDes(message[i][j])
          }
        }
      } else {
        message[i] = encryptDes(message[i])
      }
    }
  } else {
    message = encryptDes(message)
  }
  return message
}

html：

<script src="js/CryptoJS.min.js"></script> 
<script src="js/crypto-js.js"></script>
<script  type="text/babel">
	var myApp = new Vue({
	el: '#app',
	data: {},
	methods: {
		doEncrypt () {
			var title = encodeURIComponent(Encrypt('标题标题'))
			// Encrypt 直接引用
			/*数据加密后有的数据会有'+'等字符提交数据时会变成空格
			使用encodeURIComponent(str)对加密后数据进行编码 提交后数据不会有改变 功能才可以正常使用 */
		}
	}
</script>