一文带你学会国产加密算法SM4的vue实现方案 (4)

我们定义这样的两个变量。全局变量用于是否进行加密1是进行加密，0是进行解密。
在encryptUrl 中key值配置为要加密的url，value值设置成属性必须加密name属性，sex属性不加密。

const isEncrypt = '1'; // 1是加密 0是不加密 // 将所有要加密的url和key放在一起 const encryptUrl = { [/test/save`]: ['name'], }; 针对于加密解密进行函数的封装

上面已经有了可以使用的工具类，我们对此进行递归的函数封装。

function encryptValue(pObj, pParamKeys, pDecrypt) { if (pObj) { if (Array.isArray(pObj)) { let i = pObj.length; while (i--) { encryptValue(pObj[i], pParamKeys, pDecrypt); } } else if (typeof (pObj) === 'object') { if (pObj.constructor !== RegExp) { for (const k in pObj) { if (pObj.hasOwnProperty(k)) { if (typeof (pObj[k]) === 'object') { encryptValue(pObj[k], pParamKeys, pDecrypt); } else if (pParamKeys.indexOf(k) !== -1 && pObj[k]) { if (pDecrypt === true) { // 解密 pObj[k] = decrypt(pObj[k]); } else { pObj[k] = encrypt(pObj[k]); } } } } } } } } request的拦截方式

我们首先拦截所有请求的request的地方，进行sm4加密解密。代码如下：

axios.interceptors.request.use( (config) => { // 加密代码开始------------------- // 获取到当前请求的所有值 const paramData = lodash.cloneDeep(config.data); // 获取到加密的url const urlAddr = config.url; let md5Data = ''; if (paramData && isEncrypt === '1') { let paramKeys = []; for (const key in encryptUrl) { if (encryptUrl.hasOwnProperty(key)) { if (urlAddr && urlAddr.startsWith(key)) { paramKeys = encryptUrl[key]; break; } } } // 获取到所有要加密的key值。 if (paramKeys && paramKeys.length > 0) { let SM4cloneData = paramData; if (typeof (SM4cloneData) === 'string') { try { const dataStr = $.parseJSON(SM4cloneData); encryptValue(dataStr, paramKeys); SM4cloneData = JSON.stringify(dataStr); } catch (e) { console.log(e); } } else { encryptValue(SM4cloneData, paramKeys); } } const md5Hash = crypto.createHash('md5'); const dataJson = JSON.stringify(config.data); md5Hash.update(dataJson); md5Data = md5Hash.digest('hex'); config.data = paramData; } config.headers = { 'md5': md5Data, }; return config; } ); response的拦截方式

针对于response我们要对配置的url进行解密。

axios.interceptors.response.use( (response) => { // 开始解密 // 获取到当前请求的所有值 const cloneData = lodash.cloneDeep(response.data); // 获取到解密的url const urlAddr = response.url; // 对paramData进行加密,此时先直接加密做试验。 if (cloneData && isEncrypt === '1') { let paramKeys = []; for (const key in encryptUrl) { if (encryptUrl.hasOwnProperty(key)) { if (urlAddr && urlAddr.startsWith(key)) { paramKeys = encryptUrl[key]; break; } } } // 获取到所有要解密的key值。 if (paramKeys && paramKeys.length > 0) { let SM4cloneData; if (Array.isArray(cloneData)) { SM4cloneData = cloneData.data; } else if (typeof (cloneData) === 'object') { SM4cloneData = cloneData; } if (typeof (SM4cloneData) === 'string') { try { const dataStr = $.parseJSON(SM4cloneData); encryptValue(dataStr, paramKeys, true); SM4cloneData = JSON.stringify(dataStr); } catch (e) { console.log(e); } } else { encryptValue(SM4cloneData, paramKeys, true); } const md5Hash = crypto.createHash('md5'); const dataJson = JSON.stringify(cloneData); md5Hash.update(dataJson); const md5Data = md5Hash.digest('hex'); if (response.headers.md5.hasOwnProperty('md5')) { if (md5Data === response.headers.md5) { alert("md5完整性校验错误"); return; } } } return response.data; } return response.data; }, ); 总结

支持基于vue的国产sm4加密解密方案到此结束。文中难免有不足之处，希望大家批评指正。