快捷導(dǎo)航

vue項(xiàng)目之前端CryptoJS加密、解密代碼示例

更新時(shí)間：2024年11月04日 09:58:11 作者：大個(gè)個(gè)個(gè)個(gè)個(gè)兒

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

1、vue項(xiàng)目需要安裝CryptoJS安裝包

npm install crypto-js

2、在項(xiàng)目中引入CryptoJS

import CryptoJS from 'crypto-js'

3、使用，代碼如下

// 此處key為16進(jìn)制
 let key = 'jiajiajiajiajiajiajiajia';
  console.log('密鑰：', key);
  // key格式化處理
  key = CryptoJS.enc.Utf8.parse(key)
  // 偏移量長(zhǎng)度為16位, 注：偏移量需要與后端定義好，保證一致
  let iv = "37fa77f6a3b0462d";
  iv = CryptoJS.enc.Utf8.parse("37fa77f6a3b0462d");
  // 加密內(nèi)容
  const source = {
  "username": "用戶(hù)名",
  "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項(xiàng)目之前端CryptoJS加密、解密的文章就介紹到這了,更多相關(guān)前端CryptoJS加密、解密內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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