处理路由参数加密解密

package.json

@@ -9,6 +9,8 @@
     "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
   },
   "dependencies": {
+    "@wangeditor/editor": "5.1.23",
+    "@wangeditor/editor-for-vue": "1.0.2",
     "async-validator": "^4.2.5",
     "babel-polyfill": "6.26.0",
     "bignumber.js": "^9.1.1",
@@ -18,7 +20,7 @@
     "camunda-bpmn-moddle": "4.4.0",
     "codemirror": "5.54.0",
     "core-js": "2.6.12",
-    "crypto-js": "4.2.0",
+    "crypto-js": "^4.2.0",
     "diff-match-patch": "1.0.5",
     "echarts": "4.6.0",
     "ejs": "3.1.7",
@@ -32,6 +34,7 @@
     "js-yaml": "3.14.0",
     "min-dash": "3.8.1",
     "minireset.css": "0.0.6",
+    "moment": "2.29.4",
     "print-js": "1.1.1",
     "qr.js": "0.0.0",
     "quill": "^1.3.7",
@@ -42,18 +45,15 @@
     "vis": "4.21.0-EOL",
     "vue": "2.6.11",
     "vue-codemirror": "4.0.6",
+    "vue-draggable-resizable": "2.3.0",
     "vue-i18n": "8.21.0",
     "vue-infinite-scroll": "2.0.2",
     "vue-json-editor": "1.4.3",
     "vue-router": "3.1.5",
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.2",
-    "zrender": "5.3.1",
-    "moment": "2.29.4",
-    "@wangeditor/editor": "5.1.23",
-    "@wangeditor/editor-for-vue": "1.0.2",
-    "vue-draggable-resizable": "2.3.0",
-    "xlsx": "0.18.5"
+    "xlsx": "0.18.5",
+    "zrender": "5.3.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "3.7.0",

src/router/index.js

@@ -2,6 +2,7 @@ const publicPath = require('@/config/isc-publicPath.js')
 //const webscan=require("./webscan/index.js").default;
 import Vue from 'vue'
 import Router from 'vue-router'
+import { stringifyQuery, parseQuery } from '~/utils/query'
 
 const originalPush = Router.prototype.push
 Router.prototype.push = function push(location) {
@@ -18,6 +19,8 @@ import business, { docpan }  from './business'
 
 export default new Router({
 mode:'history',
+stringifyQuery, // 序列化query参数
+parseQuery, // 反序列化query参数
 base: publicPath,
 routes: [
 	docpan,

src/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('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)
+}
\ No newline at end of file

src/utils/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
+  }
+}
+ 
+/**
+ * 序列化对象 并加密
+ * @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
+}
\ No newline at end of file