快捷導(dǎo)航

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

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

文章介紹了如何在Vue項(xiàng)目中使用crypto-js庫(kù)對(duì)瀏覽器參數(shù)進(jìn)行加密和解密,以解決參數(shù)過長(zhǎng)的問題,在router/index.js中添加了相關(guān)代碼,并在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ù)作為密鑰偏移量 隨機(jī)生成
/**
 * 加密
 * @param {String} key
 * @returns {string}
 */
// 加密后的結(jié)果通常是一個(gè)CipherParams對(duì)象，其中包含了加密后的密文數(shù)據(jù)，而密文數(shù)據(jù)本身是一個(gè)WordArray對(duì)象。同樣，在解密過程中，解密后的結(jié)果也是一個(gè)WordArray對(duì)象。
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,
  })
}
/**
 * 加密后轉(zhuǎn)base64
 * @param {String}} key
 */
export const getEncryptToBase64 = (key) => {
  const encryptStr = getEncrypt(key)
  const wordArray = Utf8.parse(encryptStr) //轉(zhuǎn)為WordArray對(duì)象
  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) //轉(zhuǎn)換為指定編碼的字符串
  try {
    decrypted = JSON.parse(decrypted)
  } catch (e) {
    console.warn(e)
  }
  return decrypted
}
/**
 * 對(duì)base64數(shù)據(jù)解密  先解析base64，在做解密
 * @param {String} data
 * @returns {string}
 */
export const getDecryptByBase64 = (data) => {
  // 將Base64字符串轉(zhuǎn)換為WordArray
  const parsedWordArray = Base64.parse(data)
  //   WordArray對(duì)象轉(zhuǎn)換成一個(gè)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ù)作為密鑰偏移量 隨機(jī)生成
/**
 * 加密
 * @param {String} key
 * @returns {string}
 */
// 加密后的結(jié)果通常是一個(gè)CipherParams對(duì)象，其中包含了加密后的密文數(shù)據(jù)，而密文數(shù)據(jù)本身是一個(gè)WordArray對(duì)象。同樣，在解密過程中，解密后的結(jié)果也是一個(gè)WordArray對(duì)象。
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,
  })
}
/**
 * 加密后轉(zhuǎn)base64
 * @param {String}} key
 */
export const getEncryptToBase64 = (key) => {
  const encryptStr = getEncrypt(key)
  const wordArray = Utf8.parse(encryptStr) //轉(zhuǎn)為WordArray對(duì)象
  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) //轉(zhuǎn)換為指定編碼的字符串
  try {
    decrypted = JSON.parse(decrypted)
  } catch (e) {
    console.warn(e)
  }
  return decrypted
}
/**
 * 對(duì)base64數(shù)據(jù)解密  先解析base64，在做解密
 * @param {String} data
 * @returns {string}
 */
export const getDecryptByBase64 = (data) => {
  // 將Base64字符串轉(zhuǎn)換為WordArray
  const parsedWordArray = Base64.parse(data)
  //   WordArray對(duì)象轉(zhuǎn)換成一個(gè)UTF-8編碼的字符串
  const decryptStr = Utf8.stringify(parsedWordArray)
  return getDecrypt(decryptStr)
}

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

您可能感興趣的文章: