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

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

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

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

npm install crypto-js

2、在項目中引入CryptoJS

import CryptoJS from 'crypto-js'

3、使用，代碼如下

// 此處key為16進制
 let key = 'jiajiajiajiajiajiajiajia';
  console.log('密鑰：', key);
  // key格式化處理
  key = CryptoJS.enc.Utf8.parse(key)
  // 偏移量長度為16位, 注：偏移量需要與后端定義好，保證一致
  let iv = "37fa77f6a3b0462d";
  iv = CryptoJS.enc.Utf8.parse("37fa77f6a3b0462d");
  // 加密內容
  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));

總結

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

您可能感興趣的文章:

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