vue項目之前端CryptoJS加密、解密代碼示例

更新時間：2024年11月04日 09:58:11 作者：大個個個個個兒

在Vue項目中集成CryptoJS進(jìn)行數(shù)據(jù)加密,首先需要通過npm安裝CryptoJS安裝包,然后在項目文件中引入CryptoJS,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、vue項目需要安裝CryptoJS安裝包

npm install crypto-js

2、在項目中引入CryptoJS

import CryptoJS from 'crypto-js'

3、使用，代碼如下

// 此處key為16進(jìn)制
 let key = 'jiajiajiajiajiajiajiajia';
  console.log('密鑰：', key);
  // key格式化處理
  key = CryptoJS.enc.Utf8.parse(key)
  // 偏移量長度為16位, 注：偏移量需要與后端定義好，保證一致
  let iv = "37fa77f6a3b0462d";
  iv = CryptoJS.enc.Utf8.parse("37fa77f6a3b0462d");
  // 加密內(nèi)容
  const source = {
  "username": "用戶名",
  "password": "密碼",
  "timestamp": new Date().getTime()
	}
	const content = JSON.stringify(source);
  console.log('加密前：', source);
  // 加密方法
  const encryptedContent = CryptoJS.AES.encrypt(content, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,  
      padding: CryptoJS.pad.Pkcs7
  })
  const encStr = encryptedContent.ciphertext.toString()
  console.log("加密后：", encStr);
  // 解密方法
  const decryptedContent = CryptoJS.AES.decrypt(CryptoJS.format.Hex.parse(encStr), key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,  
      padding: CryptoJS.pad.Pkcs7
  })
  console.log('解密:',CryptoJS.enc.Utf8.stringify(decryptedContent));

總結(jié)

到此這篇關(guān)于vue項目之前端CryptoJS加密、解密的文章就介紹到這了,更多相關(guān)前端CryptoJS加密、解密內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

功能強大的vue.js拖拽組件安裝應(yīng)用
這篇文章主要為大家介紹了功能強大的vue.js拖拽組件安裝應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
在Vue3中實現(xiàn)拖拽文件上傳功能的過程詳解
文件上傳是我們在開發(fā)Web應(yīng)用時經(jīng)常遇到的功能之一,為了提升用戶體驗,我們可以利用HTML5的拖放API來實現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實現(xiàn)這一功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2023-12-12
Vue基于localStorage存儲信息代碼實例
這篇文章主要介紹了Vue基于localStorage存儲信息代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-11-11
vite打包只生成了一個css和js文件問題的解決方法
今天整了一個項目,試了下打包,發(fā)下打包后只生成了一個css文件,和一個js文件,這樣肯定是不行的,因為這樣這個文件的包大小很大,第一次訪問會導(dǎo)致白屏問題,所以本文給大家介紹了vite打包只生成了一個css和js文件問題的解決方法,需要的朋友可以參考下
2024-05-05
Vue3頁面數(shù)據(jù)加載延遲的問題分析和解決方法
在?Vue?3?的項目中,當(dāng)我們使用響應(yīng)式數(shù)據(jù)（如?ref?或?computed）來管理頁面狀態(tài)時,可能會遇到由于接口數(shù)據(jù)加載延遲,導(dǎo)致頁面初始渲染時數(shù)據(jù)尚未獲取完成的問題,本文針對此問題簡單分析了原因和解決方法,需要的朋友可以參考下
2024-11-11
詳解Vue開發(fā)微信H5微信分享簽名失敗問題解決方案
這篇文章主要介紹了詳解Vue開發(fā)微信H5微信分享簽名失敗問題解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Vue計算屬性的使用
本篇文章主要介紹了Vue計算屬性的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
vue輸入框使用模糊搜索功能的實現(xiàn)代碼
這篇文章主要介紹了vue輸入框使用模糊搜索功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-05-05
更強大的vue ssr實現(xiàn)預(yù)取數(shù)據(jù)的方式
這篇文章主要介紹了更強大的 vue ssr 預(yù)取數(shù)據(jù)的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
checkbox在vue中的用法小結(jié)
之前對于vue中用到過的checkbox也只是別人寫好的組件，這次在自己實現(xiàn)時走了很多坑，特意寫這篇文章記錄到腳本之家平臺，供大家參考
2018-11-11