VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例

發(fā)布時間：2020-09-29 09:59:05 來源：腳本之家閱讀：461 作者：其實我喜歡喝咖啡欄目：web開發(fā)

第一步安裝

安裝crypto-js

第二步創(chuàng)建

在js文件目錄下創(chuàng)建一個js文件secret

VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例

/**
 * 對頁面上輸入的密碼進行加密傳輸給后臺進行驗證，對返回的數(shù)據(jù)進行解密，在頁面展示
 */
let CryptoJS = require('crypto-js'); // 引入AES源碼js
export default {
/*
* 對密碼進行加密，傳輸給后臺進行驗證
* @param {String}   word  需要加密的密碼
* @param {String}   keyStr  對密碼加密的秘鑰
* @return {String}   加密的密文
* */
encrypt(word, keyStr) { // 加密
  keyStr = keyStr ? keyStr : 'ABGHNJHGSHUYG12';
  let key = CryptoJS.enc.Utf8.parse(keyStr);
  let srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();
},
/*
* 對加密之后的密文在頁面上進行解密，以便用戶進行修改
* @param {String}   word  需要加密的密碼
* @param {String}   keyStr  對密碼加密的秘鑰
* @return {String}   解密的明文
* */
decrypt(word, keyStr) { // 解密
  keyStr = keyStr ? keyStr : 'ABGHNJHGSHUYG12';
  let key = CryptoJS.enc.Utf8.parse(keyStr);
  let decrypt = CryptoJS.AES.decrypt(word, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
},
};

第三步，引入

在具體的加解密模塊中引入文件

VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例

并且對需要加密的密碼使用加密函數(shù)進行加密

VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例

encrypt是加密函數(shù)

第一個參數(shù)是需要加密的明文

第二個參數(shù)是加密過程中使用的秘鑰

VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽