Vue 針對瀏覽器參數(shù)過長實現(xiàn)瀏覽器參數(shù)加密解密的操作方法

更新時間：2024年12月31日 15:15:16 作者：沉默是金~

文章介紹了如何在Vue項目中使用crypto-js庫對瀏覽器參數(shù)進行加密和解密,以解決參數(shù)過長的問題,在router/index.js中添加了相關代碼,并在utils工具類中添加了encryption.js和query.js源碼,感興趣的朋友一起看看吧

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') // 十六位數(shù)作為密鑰，自行修改
const ivHex = CryptoJS.lib.WordArray.random(128 / 8) // 十六位數(shù)作為密鑰偏移量 隨機生成
/**
 * 加密
 * @param {String} key
 * @returns {string}
 */
// 加密后的結果通常是一個CipherParams對象，其中包含了加密后的密文數(shù)據(jù)，而密文數(shù)據(jù)本身是一個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數(shù)據(jù)解密  先解析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 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') // 十六位數(shù)作為密鑰，自行修改
const ivHex = CryptoJS.lib.WordArray.random(128 / 8) // 十六位數(shù)作為密鑰偏移量 隨機生成
/**
 * 加密
 * @param {String} key
 * @returns {string}
 */
// 加密后的結果通常是一個CipherParams對象，其中包含了加密后的密文數(shù)據(jù)，而密文數(shù)據(jù)本身是一個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數(shù)據(jù)解密  先解析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)
}

到此這篇關于Vue 針對瀏覽器參數(shù)過長實現(xiàn)瀏覽器參數(shù)加密解密的文章就介紹到這了,更多相關vue瀏覽器參數(shù)加密解密內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: