VueJs裏利用CryptoJs實現加密及解密

第一步 安裝
安裝crypto-js
clipboard.png函數

第二步 建立
在js文件目錄下建立一個js文件secretui

clipboard.png

/**
 * 對頁面上輸入的密碼進行加密傳輸給後臺進行驗證,對返回的數據進行解密,在頁面展現
 */
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();
},
};

第三步,引入
在具體的加解密模塊中引入文件加密

clipboard.png

而且對須要加密的密碼使用加密函數進行加密spa

clipboard.png

encrypt是加密函數
第一個參數是須要加密的明文
第二個參數是加密過程當中使用的祕鑰3d

clipboard.png

我是一個小小白,誰能摸黑我快點來code

相關文章
相關標籤/搜索