jsencrypt 兼容低版本浏览器

记录一个加密插件 jsencrypt.js 在 vue3+ts 中的使用，以及如何兼容低版本 chrome65 浏览器

一、jsencrypt.js 使用

1、下载

npm i jsencrypt

2、创建一个js文件，引入插件并封装一个加密方法

import { JSEncrypt } from 'jsencrypt'

export const encryptedFunc = (pwd) => {
  let encryptor = new JSEncrypt()
  let publicKey = '公钥' // publicKey为公钥，由后端提供
  encryptor.setPublicKey(publicKey)
  let pwdEnctyor = encryptor.encrypt(pwd)
  return pwdEnctyor
}

3、使用示例

import { encryptedFunc } from '@/utils/pwd.js'

// 加密
password: encryptedFunc(form.password)

至此密码就已完成加密，在较新的浏览器中已经可以正常使用了，但是如果在更古老的浏览器中就会有报错了。

二、jsencrypt.js 兼容

当将上面的代码在 chrome65 中运行时，就会报错，试了网上各种各样的方法，比如下载插件代码引入，修改源码中的某些属性，换版本之类的，找了很久后来发现只需要在 index.html 中加入一段代码就可以解决兼容问题

1、解决兼容的代码块

<script>
      !(function(t){function e(){var e = this || self; (e.globalThis = e), delete t.prototype._T_; } "object" != typeof globalThis && (this ? e() : (t.defineProperty(t.prototype, "_T_", {configurable: !0, get: e, }), _T_)) })(Object);
</script>

2、问题详情

当将打包好的文件在低版本浏览器中运行时会报错 globalThis is not defined

百度一下 globalThis:

globalThis在不同环境中的表现

• ‌浏览器‌：在浏览器中，通常使用window作为全局对象。虽然某些浏览器尚未完全支持globalThis，但可以通过polyfill来模拟其功能‌。
• ‌Node.js‌：在Node.js中，globalThis提供了与global相同的功能，但globalThis是更标准化的选择‌3。

应该就是旧版本的浏览器没有 globalThis 这个全局变量，我们现在手动给他创建一个，就解决了。

当然也有很多其他的方法可以解决兼容问题，AI也提供了一些思路，可供大家参考