前端vue2使用國(guó)密SM4進(jìn)行加密、解密具體方法
SM4是一種對(duì)稱加密算法,也被稱為國(guó)標(biāo)SM4。它是在中國(guó)的國(guó)家密碼標(biāo)準(zhǔn)下開發(fā)的,主要用于保護(hù)電子數(shù)據(jù)的機(jī)密性和完整性。
SM4算法采用分組密碼工作方式,其分組長(zhǎng)度為128位,密鑰長(zhǎng)度為128位、192位或256位。它是一種分組長(zhǎng)度和密鑰長(zhǎng)度都可變的分組密碼,其使用的密鑰長(zhǎng)度取決于實(shí)際應(yīng)用場(chǎng)景的安全需求。
SM4加密有兩種模式:ECB和CBC。
ECB模式是最簡(jiǎn)單的塊密碼加密模式,加密前根據(jù)加密塊大小分成若干塊,之后將每塊使用相同的密鑰單獨(dú)加密,解密同理。這種模式的優(yōu)點(diǎn)在于簡(jiǎn)單和有利于并行計(jì)算,而且誤差不會(huì)被傳送。然而,ECB模式不能隱藏明文的模式,可能對(duì)明文進(jìn)行主動(dòng)攻擊。
CBC模式則是一種循環(huán)模式(鏈?zhǔn)剑耙粋€(gè)分組的密文和當(dāng)前分組的明文操作后再加密,這樣做的目的是增強(qiáng)破解難度。這種模式不容易主動(dòng)攻擊,安全性好于ECB,適合傳輸長(zhǎng)度長(zhǎng)的報(bào)文,是SSL、IPSec的標(biāo)準(zhǔn)。然而,CBC模式不利于并行計(jì)算,誤差傳遞,還需要初始化向量IV。
這里是在vue2的項(xiàng)目里使用,具體使用方法如下:
1、安裝gm-crypt依賴
npm install gm-crypt
2、在utils文件下新建sm4Util.js
// sm4Utils.js const SM4 = require("gm-crypt").sm4; const pwdKey = "pwdKeyketihuan"; //"pwdKeyketihuan"; 密鑰 前后端一致即可,后端提供 let sm4Config = { key: pwdKey, //這里這個(gè)key值要與后端的一致,后端解密是根據(jù)這個(gè)key mode: "cbc", // 加密的方式有兩種,ecb和cbc兩種,也是看后端如何定義的 iv: 'woshiiv', //iv是cbc模式的第二個(gè)參數(shù),也需要跟后端配置的一致, ecb不用iv。 iv是initialization vector的意思,就是加密的初始話矢量,初始化加密函數(shù)的變量,也叫初始向量。(本來應(yīng)該動(dòng)態(tài)生成的,由于項(xiàng)目沒有嚴(yán)格的加密要求,直接寫死了) cipherType: "base64" }; const sm4Util = new SM4(sm4Config); // new一個(gè)sm4函數(shù),將上面的sm4Config作為參數(shù)傳遞進(jìn)去。 /* * 加密工具函數(shù) * @param {String} text 待加密文本 */ export function encrypt(text) { try { return sm4Util.encrypt(text, pwdKey); } catch { return text; } } /* * 解密工具函數(shù) * @param {String} text 待解密密文 */ export function decrypt(text) { try { return sm4Util.decrypt(text, pwdKey); } catch { return text; } }
3、可以直接在使用的文件里面引用使用
方法一
import { encrypt, decrypt } from "@/utils/sm4Util.js" //引入sm4.js let passWord = '1q2w3e4r'; // 加密 let passSm4en = encrypt(passWord); // 解密 let passSm4de = decrypt(passSm4en);
4、或者在utils下面新建propFormat.js
// propFormat.js import { encrypt, decrypt } from "@/utils/sm4Util.js" //引入sm4.js let propFormat = { // sm4加密 encryptFormat: function(str) { if (str) { return encrypt(str); } else { return ''; } }, // sm4解密 decryptFormat: function(str) { if (str) { return decrypt(str); } else { return ''; } } } export default propFormat;
方法二
let passWord = '1q2w3e4r'; // 加密 let passSm4en = this.$util.propFormat.encryptFormat(passWord); // 解密 let passSm4de = this.$util.propFormat.decryptFormat(passSm4en);
方法三
這種一般用在div展示的時(shí)候,直接解密展示
在propFormat.js同級(jí)的index.js里面引入工具類,并導(dǎo)出
// index.js // 引入所有的工具類 ... import propFormat from './propFormat.js' ... // 導(dǎo)出在一個(gè)對(duì)象上 export default { ... propFormat, ... }
在main里面注入全局
// main.js ... import vueFilter from './utils/propFormat.js' ... for (let i in vueFilter) { Vue.filter(i, vueFilter[i]) }
// 使用
// 解密 <div class='password'>{{ password | decryptFormat }}</div>
總結(jié)
到此這篇關(guān)于前端vue2使用國(guó)密SM4進(jìn)行加密、解密的文章就介紹到這了,更多相關(guān)vue2國(guó)密SM4加密解密內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)
這篇文章主要介紹了vue2.0 element-ui中的el-select選擇器無法顯示選中的內(nèi)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文2018-08-08如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
這篇文章主要介紹了如何配置vue.config.js 處理static文件夾下的靜態(tài)文件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06淺談vue單頁面中有多個(gè)echarts圖表時(shí)的公用代碼寫法
這篇文章主要介紹了淺談vue單頁面中有多個(gè)echarts圖表時(shí)的公用代碼寫法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue用h()函數(shù)創(chuàng)建Vnodes的實(shí)現(xiàn)
Vue提供了一個(gè)h()函數(shù)用于創(chuàng)建vnodes,本文就來介紹一下vue用h()函數(shù)創(chuàng)建Vnodes的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01詳解Vue.js 作用域、slot用法(單個(gè)slot、具名slot)
這篇文章主要介紹了Vue.js 作用域、slot用法(單個(gè)slot、具名slot),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10微信小程序如何像vue一樣在動(dòng)態(tài)綁定類名
這篇文章主要介紹了微信小程序如何像vue一樣在動(dòng)態(tài)綁定類名,文中給大家提到了vue與微信小程序的區(qū)別,需要的朋友可以參考下2018-04-04vue移動(dòng)端城市三級(jí)聯(lián)動(dòng)組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端城市三級(jí)聯(lián)動(dòng)組件的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07