VueJs里利用CryptoJs實(shí)現(xiàn)加密及解密

shleyZ 發(fā)布于2019-08-23 17:11 / 3111人閱讀

摘要：第一步安裝安裝第二步創(chuàng)建在文件目錄下創(chuàng)建一個文件對頁面上輸入的密碼進(jìn)行加密傳輸給后臺進(jìn)行驗(yàn)證，對返回的數(shù)據(jù)進(jìn)行解密，在頁面展示引入源碼對密碼進(jìn)行加密，傳輸給后臺進(jìn)行驗(yàn)證需要加密的密碼對密碼加密的秘鑰加密的密文加密對加密之后的密文在頁面上

第一步安裝
安裝crypto-js

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

/**
 * 對頁面上輸入的密碼進(jìn)行加密傳輸給后臺進(jìn)行驗(yàn)證，對返回的數(shù)據(jù)進(jìn)行解密，在頁面展示
 */
let CryptoJS = require("crypto-js"); // 引入AES源碼js
export default {
/*
* 對密碼進(jìn)行加密，傳輸給后臺進(jìn)行驗(yàn)證
* @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();
},
/*
* 對加密之后的密文在頁面上進(jìn)行解密，以便用戶進(jìn)行修改
* @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ù)進(jìn)行加密

encrypt是加密函數(shù)
第一個參數(shù)是需要加密的明文
第二個參數(shù)是加密過程中使用的秘鑰

我是一個小小白，誰能摸黑我快點(diǎn)來

云服務(wù)器 GPU云服務(wù)器 php實(shí)現(xiàn)加密解密加密解密加密視頻解密加密和解密

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103950.html

相關(guān)文章

JavaScript基于crypto-js的加密和PHP對此加密的解密及相同加密方式

摘要：合適和夠用是最完美的追求。個人網(wǎng)站最近剛寫了一個手機(jī)在線播放的電影站基于的加密和對此加密的解密及相同加密方式最近使用做了一個電影電視劇在線播放的的小站，使用到的是的進(jìn)行實(shí)時抓取，其中遇到了加密的問題，遂解決之，才有了這篇總結(jié)。關(guān)于作者程序開發(fā)人員，不拘泥于語言與技術(shù)，目前主要從事PHP和前端開發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開發(fā)。合適和夠用是...

xuhong 2019-06-27 16:24 評論0 收藏0
JavaScript基于crypto-js的加密和PHP對此加密的解密及相同加密方式

摘要：合適和夠用是最完美的追求。個人網(wǎng)站最近剛寫了一個手機(jī)在線播放的電影站基于的加密和對此加密的解密及相同加密方式最近使用做了一個電影電視劇在線播放的的小站，使用到的是的進(jìn)行實(shí)時抓取，其中遇到了加密的問題，遂解決之，才有了這篇總結(jié)。關(guān)于作者程序開發(fā)人員，不拘泥于語言與技術(shù)，目前主要從事PHP和前端開發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開發(fā)。合適和夠用是...

saucxs 2019-08-22 11:03 評論0 收藏0
一套簡單的基于 RSA + AES 加密機(jī)制的前端解決方案

摘要：前言因公司現(xiàn)有后臺管理系統(tǒng)項(xiàng)目需對部分網(wǎng)絡(luò)請求接口的重要數(shù)據(jù)進(jìn)行加密，整合了一套簡單的基于加密機(jī)制的前端解決方案。用戶已登錄成功，頁面刷新后將會重新生成，這時候需從中獲取并和上傳后端，后端重新綁定和。前言因公司現(xiàn)有后臺管理系統(tǒng)項(xiàng)目需對部分網(wǎng)絡(luò)請求接口的重要數(shù)據(jù)進(jìn)行加密，整合了一套簡單的基于 RSA + AES 加密機(jī)制的前端解決方案。參考文獻(xiàn)： crypto 廖雪峰 crypt...

Travis 2019-08-23 17:58 評論0 收藏0
前端crypto-js解密報malformed utf-8 data小結(jié)

摘要：一般情況下，很少會在前端進(jìn)行加解密的操作，因?yàn)闆]有太大的必要性，前端的代碼是很容易看到的，即使這樣，我覺得還是有比較處理一下的，至少不讓別人一眼就看到信息我使用存儲了一些用戶的用戶名昵稱等的信息，通過進(jìn)行加解密處理，這里我選用了加密算法對一般情況下，很少會在前端進(jìn)行加解密的操作，因?yàn)闆]有太大的必要性，前端的代碼是很容易看到的，即使這樣，我覺得還是有比較處理一下的，至少不讓別人一眼就看...

codergarden 2019-08-23 14:21 評論0 收藏0
使用crypto-js進(jìn)行128位AES/ECB/PKCS7Padding加密/解密

摘要：支持多種加解密方案這里主要記錄一下使用進(jìn)行位的加解密前端加密是不安全的不安全的不安全的初始化一個文件直接全部回車就行啦安裝在同級目錄下新建一個文件寫入以下內(nèi)容導(dǎo)入包定義加解密的都放這里了加密還有啥意義設(shè)置數(shù)據(jù)塊長度生成密鑰字節(jié)數(shù) crypto-js支持多種加/解密方案, 這里主要記錄一下使用 crypto-js 進(jìn)行 AES 128位的加/解密; 前端加密是不安全的, 不安全的, 不...

jas0n 2019-08-21 16:19 評論0 收藏0