uniapp中使用rsa(jsencrypt)加密报错的问题

近期在uniapp中使用rsa加密，但总是报错。报错如下

reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Exception: ReferenceError: Can't find variable: navigator
__webpack_require__@weex createInstanceContext:79:34

以上报错仅仅只是供参考，因为可能报错的信息可能会不一样，我这里报错信息大概总结为navigator这个对象找不到。

一、.环境

我在uniapp 上安装的rsa加密插件是'jsencrypt'，使用npm安装

二、现象

用uniapp开发的时候，在网页预览是没问题的，因为网页包含DOM和BOM以及Window对象。rsa加密会获取window对象，所以浏览器预览是没问题的。但是如果你一旦编译在安卓上或者编译在小程序上，此时问题就会出现了。就会发生类似以上的报错

三、分析原因

造成这样的原因是因为rsa加密获取的window对象，在安卓上或者小程序上是找不到的，因为小程序或者安卓端是不存在Window对象的

四、解决方案

在node_modules中找到jsencrypt/bin/jsencrypt.js目录 如下

QQ截图20200328104635.png

；

打开jsencrypt.js 在代码中找到'use strict'; 在这句严格模式代码下一行插入

// 用来替换 navigator
 var navigator2 = {
    appName: 'Netscape',
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1'
  };
  //  用来替换window
  var window2 = {
    ASN1: null,
    Base64: null,
    Hex: null,
    crypto: null,
    href: null
  };

如下图

QQ截图20200328104833.png

将上面的代码放入后，然后ctrl+f搜索当前js文件中的window和navigator ，分别都替换为window2和navigator2。替换完成后就保存。此时再次在man.js中引入。就不会报错。引入如下

import JSEncrypt from 'jsencrypt';
//模拟公钥 一般是后端工程师提供
var publicKey =
"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCJpTYsMvGsDXKgqJX10cq4iFr9/HrzP6kygjmVt1bFf7zRf1pChdFPBo4ziQn83eAb";
// rsa加密
Vue.prototype.$getRsaCode = function(str) { // 注册方法
    let pubKey = `-----BEGIN PUBLIC KEY-----${publicKey}-----END PUBLIC KEY-----`; // ES6 模板字符串 引用 rsa 公钥
    let encryptStr = new JSEncrypt();
    encryptStr.setPublicKey(pubKey); // 设置 加密公钥
    let data = encryptStr.encrypt(str.toString()); // 进行加密
    return data;
}

至此，问题解决。 参考链接

https://www.meiwen.com.cn/subject/rwyckqtx.html

另外，如果单独开发小程序的时候发生rsa报错，建议使用小程序npm模式，安装引入wx-rsa即可。