VueJs里利用CryptoJs實(shí)現(xiàn)加密及解密的方法示例

更新時(shí)間：2019年04月29日 08:28:31 作者：其實(shí)我喜歡喝咖啡

這篇文章主要介紹了VueJs里利用CryptoJs實(shí)現(xiàn)加密及解密的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

第一步安裝

安裝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ò)程中使用的秘鑰

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何去除element-ui中table的hover效果
這篇文章主要介紹了如何去除element-ui中table的hover效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解vue-cli項(xiàng)目中的proxyTable跨域問(wèn)題小結(jié)
這篇文章主要介紹了詳解vue-cli項(xiàng)目中的proxyTable跨域問(wèn)題小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
你點(diǎn)的 ES6一些小技巧,請(qǐng)查收
本文給大家總結(jié)ES6新特性：默認(rèn)參數(shù)、reduce、解構(gòu)賦值和Set在使用時(shí)的一些小技巧。需要的朋友參考下吧
2018-04-04
在vscode中使用腳手架搭建vue項(xiàng)目
這篇文章主要介紹了在vscode中使用腳手架搭建vue項(xiàng)目的相關(guān)資料,包括創(chuàng)建Vue2和Vue3項(xiàng)目,并展示了如何自定義項(xiàng)目配置,如選擇特性、路由模式、CSS預(yù)處理器和工具配置,通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-12-12
vue中v-for指令完成列表渲染
這篇文章主要給大家分享的是vue中v-for指令完成列表渲染，下面文化章就圍繞中v-for的相關(guān)資料在Vue中列表渲染做個(gè)簡(jiǎn)單總結(jié)和使用演示,需要的朋友可以參考一下，希望對(duì)大家有所幫助
2021-11-11
vue todo-list組件發(fā)布到npm上的方法
這篇文章主要介紹了vue todo-list組件發(fā)布到npm上的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
詳解Vue中如何避免濫用watch
這篇文章主要為大家詳細(xì)介紹了Vue中濫用watch帶來(lái)的問(wèn)題以及如何解決,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
vue中解決el-date-picker更改樣式不生效問(wèn)題
在使用Vue.js進(jìn)行前端開(kāi)發(fā)的過(guò)程中,Element?UI?是一個(gè)非常流行的UI庫(kù),它提供了一套完整的組件來(lái)快速搭建美觀的用戶(hù)界面,但是我們經(jīng)常遇到一個(gè)問(wèn)題使用Element?UI提供的el-date-picker組件時(shí),嘗試自定義其樣式卻無(wú)法生效,所以本文給大家介紹如何解決這個(gè)問(wèn)題
2024-10-10
Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(2)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的,文章基于上篇文章展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-08-08
el-date-picker日期范圍限制的實(shí)現(xiàn)
本文主要介紹了el-date-picker日期范圍限制的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05