网关和加解密

项目需求:

需要对我们现有的项目进行加解密处理,选择 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值