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

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

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

第一步安裝
安裝crypto-js

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

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

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

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

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

我是一個(gè)小小白，誰(shuí)能摸黑我快點(diǎn)來(lái)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103950.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

jas0n 2019-08-21 16:19 評(píng)論0 收藏0