快捷導(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": "用戶名",
  "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)文章

Vue遞歸實(shí)現(xiàn)樹(shù)形菜單方法實(shí)例
學(xué)習(xí)vue有一段時(shí)間了，最近使用vue做了一套后臺(tái)管理系統(tǒng)，其中使用最多就是遞歸組件，下面這篇文章主要給大家介紹了關(guān)于Vue利用遞歸實(shí)現(xiàn)樹(shù)形菜單的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2018-11-11
vue如何通過(guò)事件的形式調(diào)用全局組件
這篇文章主要介紹了vue如何通過(guò)事件的形式調(diào)用全局組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
vue-scroller記錄滾動(dòng)位置的示例代碼
本篇文章主要介紹了vue-scroller記錄滾動(dòng)位置的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue3使用vue-router及路由權(quán)限攔截方式
這篇文章主要介紹了vue3使用vue-router及路由權(quán)限攔截方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中大屏適配和局部適配的方案總結(jié)
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue.js的Mixins功能結(jié)合JavaScript實(shí)現(xiàn)頁(yè)面內(nèi)容的自適應(yīng)縮放,以適應(yīng)不同比例的屏幕,需要的小伙伴可以參考下
2025-03-03
Vue實(shí)現(xiàn)圖書(shū)管理案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書(shū)管理案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
Vue使用Echarts實(shí)現(xiàn)橫向柱狀圖,并通過(guò)WebSocket即時(shí)通訊更新
這篇文章主要介紹了Vue使用Echarts實(shí)現(xiàn)橫向柱狀圖,并通過(guò)WebSocket即時(shí)通訊更新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue2.0+elementui實(shí)現(xiàn)一個(gè)上門(mén)取件時(shí)間組件
這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實(shí)現(xiàn)一個(gè)上門(mén)取件時(shí)間組件的相關(guān)資料,用于預(yù)約上門(mén)服務(wù)時(shí)間看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫(xiě)了一個(gè)簡(jiǎn)單的,需要的朋友可以參考下
2024-02-02
詳解Vue的options
options顧名思義是選項(xiàng)的意思，或稱(chēng)為構(gòu)造選項(xiàng)。是在創(chuàng)建vue實(shí)例時(shí)傳入的參數(shù)，是一個(gè)對(duì)象。該對(duì)象包含哪些屬性？每個(gè)屬性都是什么含義？本篇文章就來(lái)帶大家詳細(xì)了解其中的奧秘
2021-05-05
詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05