cryptojs vue 使用_VueJs里利用CryptoJs實現加密及解密

第一步 安裝

安裝crypto-js

第二步 創建

在js文件目錄下創建一個js文件secret

/**

* 對頁面上輸入的密碼進行加密傳輸給后臺進行驗證,對返回的數據進行解密,在頁面展示

*/

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();

},

};

第三步,引入

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

并且對需要加密的密碼使用加密函數進行加密

encrypt是加密函數

第一個參數是需要加密的明文

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

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/369994.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/369994.shtml
英文地址,請注明出處:http://en.pswp.cn/news/369994.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

html5 窗口變形,HTML5畫布(變形)

坐標變換案例1&#xff1a;function draw(){var cdocument.getElementById("myCanvas");var cxt c.getContext("2d");cxt.translate(200,50);cxt.fillStylergba(255,0,0,0.25);for(var i0;i<40;i){cxt.translate(25,25);cxt.scale(0.9,0.9);cxt.rotate(…

appium GUI介紹

Appium作為APP端的自動化測試工具&#xff0c;具有很多的有點&#xff0c;今天主要介紹一下它的UI界面&#xff0c;包含其中的一些參數等。主要說的是windows下的APPIUM GUI。 先看一眼它的界面(版本為1.4.16.1) 注: 1.android Settings - Android設置按鈕&#xff0c;所有和安…

迭代器模式和Java

大家好&#xff0c;在本文中&#xff0c;我們將檢查Iterator Pattern 。 我知道你們中許多人已經使用過一種設計模式&#xff0c;但是也許您沒有意識到它是模式&#xff0c;或者不知道它的巨大價值。 根據《 Head First Design 》一書&#xff1a; 迭代器模式提供了一種在不暴…

不使用JavaScript實現菜單的打開和關閉

我在寫有菜單欄的網頁時&#xff0c;基本都會用響應式設計來適配移動端&#xff0c;例如把不重要的菜單選項隱藏&#xff0c;或者創建一個菜單按鈕來控制的菜單的打開和關閉之類的。而我之前一直是使用JavaScript來實現菜單的打開和關閉的&#xff0c;但最近在網上看到有人使用…

負載均衡的幾種方式

&#xff08;1&#xff09;HTTP重定向負載均衡。 這種負載均衡方案的優點是比較簡單&#xff0c;缺點是瀏覽器需要每次請求兩次服務器才能拿完成一次訪問&#xff0c;性能較差。&#xff08;2&#xff09;DNS域名解析負載均衡。 DNS域名解析負載均衡的優點是將負載均衡工作交給…

芝枝.計算機與人文科學,計算機與人文科學

計算機與人文科學(2013-03-13 13:24:17)標簽&#xff1a;文化戰爭名著《靜靜的頓河》可以說從它誕生起便沒有平靜過&#xff0c;圍繞它的作者所引起的爭議&#xff0c;就像它獲得諾貝爾文學獎一樣&#xff0c;撼動文壇&#xff0c;有人指控肖洛霍夫是個騙子&#xff0c;《靜靜的…

rto初始化和計算_TCP系列13—重傳—3、協議中RTO計算和RTO定時器維護

從上一篇示例中我們可以看到在TCP中有一個重要的過程就是決定何時進行超時重傳&#xff0c;也就是RTO的計算更新。由于網絡狀況可能會受到路由變化、網絡負載等因素的影響&#xff0c;因此RTO也必須跟隨網絡狀況動態更新。如果TCP過早重傳&#xff0c;則可能會向網絡中注入很多…

在Java 8 Lambda上使用Apache Commons Functor功能接口

Apache Commons Functor &#xff08;以下稱為[functor]&#xff09;是一個Apache Commons組件&#xff0c;它提供功能性的編程API和已實現的幾種模式&#xff08;訪問者&#xff0c;生成器&#xff0c;聚合器等&#xff09;。 Java 8具有幾個不錯的新功能&#xff0c;包括lamb…

HTML5 Canvas游戲開發實戰 PDF掃描版

HTML5 Canvas游戲開發實戰主要講解使用HTML5 Canvas來開發和設計各類常見游戲的思路和技巧&#xff0c;在介紹HTML5 Canvas相關特性的同時&#xff0c;還通過游戲開發實例深入剖析了其內在原理&#xff0c;讓讀者不僅知其然&#xff0c;而且知其所以然。在本書中&#xff0c;除…

多線程之創建線程

在Java中&#xff0c;線程能區分兩種不同類型的線程&#xff1a;前臺線程和后臺線程。這兩者的區別就是&#xff1a;應用程序必須運行完所有的前臺線程才可以退出&#xff1b;而對于后臺線程&#xff0c;應用程序則可以不考慮其是否已經運行完畢而直接退出&#xff0c;所有的后…

阿 Q 的停車場

問題描述 剛拿到駕照的 KJ 總喜歡開著車到處兜風&#xff0c;玩完了再把車停到阿 Q 的停車場里&#xff0c;雖然 她對自己停車的水平很有信心&#xff0c;但她還是不放心其他人的停車水平&#xff0c;尤其是 Kelukin。于是&#xff0c; 她每次都把自己的愛車停在距離其它車最遠…

css3圖片垂直居中

圖片相對父元素垂直居中, css3屬性給父級元素設置 display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; 需要注意的是&#xff1a; 父級元素要有確定的高度&#xff01;

聲明式的理解【gpt】

一 MyBatis采用了聲明式語法來進行SQL映射配置【mybatis聲明式】 MyBatis是一款優秀的持久層框架&#xff0c;支持自定義SQL、存儲過程以及高級映射&#xff0c;使得開發人員能夠專注于SQL本身而不是數據庫訪問。MyBatis提供了兩種配置方式&#xff1a;XML配置和注解配置&…

網絡局域網看不到其它計算機,局域網中看不到其它計算機怎么辦

通過網上鄰居或查看網絡計算機時&#xff0c;看不到局域網中其它計算機&#xff0c;這是怎么回事呢?下面是學習啦小編給大家整理的一些有關看不到局域網中其它計算機的解決方法&#xff0c;希望對大家有幫助!局域網中看不到其它計算機的解決方法打開“控制面板”-“網絡和Inte…

iconfont 圖標轉為字體_iconfont字體圖標的使用方法--超簡單!

我之前因為項目用bootstrap比較多,所以使用font awesome字體圖標比較多,后來接觸到了iconfont,發現想要的什么圖標都有,還可以自定義圖標,非常強大!之前看了一波教程,覺得繁瑣,自己弄明白后感覺如此簡單,做了這么個簡單教程,直接上圖,簡單粗暴,避免新手走彎路,這里講解的默認是…

一罐來統治所有人

跳下內存通道 早在1998年&#xff0c;當我是一名C / C 開發人員時&#xff0c;嘗試使用Java時&#xff0c;有關該語言的一些內容對我來說就顯得有些惱火了。 我記得很擔心這些 為什么沒有合適的編輯器呢&#xff1f; C / C 有很多。 我為Java擁有的只是舊的記事本。 當我想要…

Django集合Ueditor

語言版本環境&#xff1a;python3.6 1、win安裝步驟&#xff1a; 1 git下載源碼https://github.com/zhangfisher/DjangoUeditor 2 解壓DjangoUeditor3-master.tar 3 cd C:\Users\fj\Desktop\DjangoUeditor3-master 4 python setup.py install 官方建議使用pip install Djang…

計算機二級高級應用考題,2016計算機二級MSOFFICE高級應用考試真題

2016計算機二級MSOFFICE高級應用考試真題離2016上半年的計算機等級考試只有一個多月了&#xff0c;為了幫助大家盡快考試過關&#xff0c;小編整理了計算機二級office考試題&#xff0c;希望能幫助到大家!(1)下列敘述中正確的是A)一個算法的空間復雜度大&#xff0c;則其時間復…

ANTLR –語義謂詞

用antlr解析簡單的語法很簡單 。 您要做的就是使用正則表達式描述您的語言&#xff0c;并讓antlr生成詞法分析器和解析器。 解析大型或復雜的語言有時會需要更多&#xff0c;因為僅使用正則表達式描述它們是困難的&#xff0c;甚至是不可能的。 語義謂詞是在語法內部編寫的Jav…

python輸入一個數組輸出24進制式的時間_4.4 用于數組的文件輸入輸出 線性代數...

Numpy能夠讀寫磁盤上的文本數據或二進制數據。這一小節只討論Numpy的內置二進制格式&#xff0c;因為更多的用戶會使用pandas或其它工具加載文本或表格數據(見第6章)。np.save和np.load是讀寫磁盤數組數據的兩個主要函數。默認情況下&#xff0c;數組是以未壓縮的原始二進制格式…