1、安裝加密gm-crypt依賴
npm install gm-crypt
2、在表單提交方法內(nèi)，直接添加下面提供的代碼，適合使用次數(shù)頻率少的情況下使用。
checkPassword() {
? this.$refs.formPass.validate(valid => {
? ? ? if (valid) {
? ? ? ? ? // 引用sm4包進(jìn)行加密
? ? ? ? ? const SM4 = require("gm-crypt").sm4;
? ? ? ? ? let sm4Config = {
? ? ? ? ? ? ? //配置sm4參數(shù)
? ? ? ? ? ? ? key: "GJwsXX_BzW=gJWJW", //這里這個(gè)key值要與后端的一致，后端解密是根據(jù)這個(gè)key
? ? ? ? ? ? ? mode: "cbc", // 加密的方式有兩種，ecb和cbc兩種，這里使用的是cbc，cbc模式還要加一個(gè)iv的參數(shù)，ecb不用
? ? ? ? ? ? ? iv: "ZkR_SiNoSOFT=568", //iv是cbc模式的第二個(gè)參數(shù)，也需要跟后端配置的一致
? ? ? ? ? ? ? cipherType: "base64" //
? ? ? ? ? };
? ? ? ? ? let sm4 = new SM4(sm4Config); //new一個(gè)sm4函數(shù)，將上面的sm4Config作為參數(shù)傳遞進(jìn)去。
? ? ? ? ? accountCenterService.checkVerificationCode({
? ? ? ? ? ? ? newPassword: sm4.encrypt(this.formPass.newPassword) //加密處理明文密碼
? ? ? ? ? }).then(res => {
? ? ? ? ? ? ? if (res.code === STATUSCODE.code01) {
? ? ? ? ? ? ? ? ? this.dialogVisible = false;
? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? this.$message.error(res.msg)
? ? ? ? ? ? ? }
? ? ? ? ? });
? ? ? }
? });
},
方案二，封裝版，作為公共方法調(diào)用
將處理的函數(shù)代碼封裝，然后把加密和解密的方法導(dǎo)出去，作為公共方法調(diào)用，方便多處使用，然后在代碼中引入調(diào)用即可。便于維護(hù)后后期使用。
1、同樣也是先安裝加密gm-crypt依賴
npm install gm-crypt
2、在項(xiàng)目的utils目錄下，新建一個(gè)sm4Util.js作為公共文件使用，
const SM4 = require("gm-crypt").sm4;
const pwdKey = "GJstSK_YBD=gSOFT"; //"GJstSK_YBD=gSOFT"; 密鑰? 前后端一致即可,后端提供
let sm4Config = {
? ? ? key: pwdKey, //這里這個(gè)key值要與后端的一致，后端解密是根據(jù)這個(gè)key
? ? ? mode: "ecb",? // 加密的方式有兩種，ecb和cbc兩種，也是看后端如何定義的，不過要是cbc的話下面還要加一個(gè)iv的參數(shù)，ecb不用
? ? ? iv: '1234567891011121', //iv是cbc模式的第二個(gè)參數(shù)，也需要跟后端配置的一致 iv是initialization vector的意思，就是加密的初始話矢量，初始化加密函數(shù)的變量，也叫初始向量。（本來應(yīng)該動(dòng)態(tài)生成的，由于項(xiàng)目沒有嚴(yán)格的加密要求，直接寫死一個(gè)）
? ? ? cipherType: "base64"
? ? };
const sm4Util = new SM4(sm4Config); // new一個(gè)sm4函數(shù)，將上面的sm4Config作為參數(shù)傳遞進(jìn)去。
/*
* 加密工具函數(shù)
* @param {String} text 待加密文本
*/
export function encrypt(text) {
? return sm4Util.encrypt(text, pwdKey);
}
/*
* 解密工具函數(shù)
* @param {String} text 待解密密文
*/
export function decrypt(text) {
? return sm4Util.decrypt(text, pwdKey);
}
3、引入sm4Util.js
import{encrypt,decrypt}from"./sm4Util.js"http://引入sm4.js? 相對路徑
4、在組件中調(diào)用對應(yīng)的方法，將需要進(jìn)行加密的數(shù)據(jù)，放入加密方法處理，
// SM4加密傳輸開始-----------------------
const user = 'admin'; // 用戶名
const pass = '123456'; // 密碼
// 開始加密? 用戶名密碼
const usernameSM4 = encrypt(user); //加密后的用戶名
const passwordSM4 = encrypt(pass); //加密后的密碼
