网关和加解密

最新推荐文章于 2024-06-02 16:26:47 发布

an_julia

最新推荐文章于 2024-06-02 16:26:47 发布

阅读量514

点赞数 6

文章标签：前端 javascript

本文链接：https://blog.csdn.net/an_julia/article/details/134802997

版权

项目需求：

需要对我们现有的项目进行加解密处理，选择 sm2 来进行，并通过 jwt 密钥来对应接口的请求进行加密

在这里插入图片描述

参考资料

具体可以百度一下什么是 sm2 加密 jwt 的身份授权
在这里插入图片描述

具体步骤

1. 引入 sm.js 文件

具体的js 文件上传了，可以自己下载

在这里插入图片描述
在public/index.js 中引入sm.js文件，让正常加载

在这里插入图片描述

2.在 utils /encrypt.js 中封装需要使用的加解密函数

在这里插入图片描述
具体代码如下

// 处理大数据精度丢失问题
// var JSONbig = require('json-bigint');
import JSONBig from 'json-bigint' 
const JSONbigString = JSONBig({ storeAsString: true}) 
/* 公钥 */
var publicKey = '自己公司的公钥'
/* 私钥 */
var privateKey = '自己公司的私钥'

/* 分割字符串 */
function splitStr (str) {
  var len = Math.ceil(str.length / 100000)
  var arr = Array(len)
  var i = 0
  for (; i < len; i++) {
    // //console.log('index: %s, len: %s, str: %s', i, len, str.length)
    arr[i] = str.substring(0, 100000)
    if (i < len) {
      str = str.substring(100000, str.length)
    }
  }
  return arr
}

/**
 * SM2加密
 */
export function encryptSM2$$2 (word) {
  var str = btoa(encodeURIComponent(JSON.stringify(word)))
  var arrStr = splitStr(str).map(s => window.SG_sm2Encrypt(s, publicKey))
  return arrStr.join('|')
}
/**
 * SM3哈希
 */
export function encryptSM3$$2 (word) {
  return window.SG_sm3encrypt(word)
}
/**
 * SM2解密
 */
export function decryptSM2$$2 (word) {
  var strs = word.split('|').map(s => window.SG_sm2Decrypt(s, privateKey))
  // var json = JSON.parse(decodeURIComponent(atob(strs.join(''))))
  // var json = JSON.parse(strs)
  var json1 =JSONbigString.parse(strs)
  return json1
}

3.在request.js中引入，用来做请求拦截，和响应拦截的请求参数响应参数的加密解密

在这里插入图片描述

注意！！！

在 .html 文件中引入

//错误 会导致异步问题，页面加载了，但是这个文件还没有加载成功的问题
<script src="./cdn/sm.js" charset="utf-8"></script>  ×  会导致异步问题

//正确 
使用 <%= BASE_URL %> 动态引入脚本文件可以 
在模板引擎中将<%= BASE_URL %> 替换为实际的根路径，确保 
sm.js 文件在其他脚本文件之前正确加载，从而解决了 
window.SG_sm2Encrypt is not a function 的问题。
这种引入方式可以在刷新页面时保持一致的加载顺序，确保依赖关系正确并且所需函数可用，进而避免出现函数未定义的错误。

<script src="<%= BASE_URL %>cdn/sm.js" charset="utf-8"></script>