VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例
更新時間:2019年04月29日 08:28:31 作者:其實我喜歡喝咖啡
這篇文章主要介紹了VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
第一步 安裝
安裝crypto-js
第二步 創(chuàng)建
在js文件目錄下創(chuàng)建一個js文件secret
/** * 對頁面上輸入的密碼進行加密傳輸給后臺進行驗證,對返回的數(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(); }, };
第三步,引入
在具體的加解密模塊中引入文件
并且對需要加密的密碼使用加密函數(shù)進行加密
encrypt是加密函數(shù)
第一個參數(shù)是需要加密的明文
第二個參數(shù)是加密過程中使用的秘鑰
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js前端加密庫Crypto-js進行MD5/SHA256/BASE64/AES加解密的方法與示例
- JavaScript實現(xiàn)的前端AES加密解密功能【基于CryptoJS】
- JS使用插件cryptojs進行加密解密數(shù)據(jù)實例
- 使用JS前端加密庫sm-crypto實現(xiàn)國密sm2、sm3和sm4加密與解密
- 前端CryptoJS加密、后端JAVA解密代碼實現(xiàn)參考
- vue項目中使用crypto-js實現(xiàn)加密解密方式
- JS使用 cryptojs加密解密(對稱加密庫)的問題
- vue項目之前端CryptoJS加密、解密代碼示例
- vue用CryptoJS加密,java用CryptoUtil解密
- crypto-js對稱加密解密的使用方式詳解(vue與java端)
相關(guān)文章
vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空
這篇文章主要介紹了vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08vue 封裝自定義組件之tabal列表編輯單元格組件實例代碼
這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實例代碼,需要的朋友可以參考下2017-09-09如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01淺談vue 組件中的setInterval方法和window的不同
這篇文章主要介紹了淺談vue 組件中的setInterval方法和window的不同,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07