非vue项目在js里使用jsencrypt

java，thinkPHP等都可以使用jsencryptjs。

使用jsencryptjs的目的是实现对数据进行加密传输，因为JSEncrypt属于RSA加密，RSA加密算法是一种非对称加密算法，RSA加密使用了"一对"密钥分别是公钥和私钥，使用公钥加密的数据,利用私钥进行解密，使用私钥加密的数据，利用公钥进行解密。

在前端项目中使用jsencrypt进行字段加密的使用步骤（以PHP为例）：获取公钥；实例化对象；设置公钥；将所需数据进行加密然后返回。

1，首先引入前端需要用到的js：crypto-js，下载命令 npm install crypto-js

将 crypto-js 文件放到要引用的路径

以下是要引用到的js

2，引用，jQuery也要记得引用哦

3，在登录页的登录按钮的function里，设置key值和iv值，这是加密的设置字段，定义要进行加密的密码passwordNode

下面再加个function

function aesMinEncrypt(key, iv, word){

var _word = CryptoJSencUtf8parse(word),

_key = CryptoJSencUtf8parse(key),

_iv = CryptoJSencUtf8parse(iv);

var encrypted = CryptoJSAESencrypt(_word, _key, {

iv: _iv,

mode: CryptoJSmodeCBC,

padding: CryptoJSpadPkcs7

});

return encryptedtoString();

}

3，（另一种）上面的过程也可以这样

function encryption(){

//密钥 (需要前端和后端保持一致)十六位作为密钥

var key = "ABCDEFGHIJKL_key";

//密钥偏移量 (需要前端和后端保持一致)十六位作为密钥偏移量

var iv = "ABCDEFGHIJKLM_iv";

var username=documentgetElementById("usr")value;

// var passwordNode=documentgetElementById("paw")value;

var passwordNode=aesMinEncrypt(key,iv,$("#paw")val());

consolelog(passwordNode);

alert("加密后的密码为："+passwordNode);

$ajax({

url: "login",

async:false,

type: "POST",

data: {'username':username,'password':passwordNode},

success: function (result) {

$("html")html(result);

}

});

}

function aesMinEncrypt(key, iv, word){

var _word = CryptoJSencUtf8parse(word),

_key = CryptoJSencUtf8parse(key),

_iv = CryptoJSencUtf8parse(iv);

var encrypted = CryptoJSAESencrypt(_word, _key, {

iv: _iv,

mode: CryptoJSmodeCBC,

padding: CryptoJSpadPkcs7

});

return encryptedtoString();

$("#form")submit();

}

4，前端加密就算是完成了，接下来是后端解密，后端解密需要用到一个工具类 AESUtils,里面是解密方法代码如下

package comwuyecommonutils;

import cnjpushapiutilsStringUtils;

import sunmiscBASE64Decoder;

import javaxcryptoCipher;

import javaxcryptospecIvParameterSpec;

import javaxcryptospecSecretKeySpec;

/

TODO

@author CSD

@date 2022-07-28 14:16

/

public class AESUtils {

//密钥 (需要前端和后端保持一致)十六位作为密钥

private static final String KEY = "ABCDEFGHIJKL_key";

//密钥偏移量 (需要前端和后端保持一致)十六位作为密钥偏移量

private static final String IV = "ABCDEFGHIJKLM_iv";

//算法

private static final String ALGORITHMSTR = "AES/CBC/PKCS5Padding";

/

base 64 decode

@param base64Code 待解码的base 64 code

@return 解码后的byte[]

@throws Exception

/

public static byte[] base64Decode(String base64Code) throws Exception{

return StringUtilsisEmpty(base64Code) null : new BASE64Decoder()decodeBuffer(base64Code);

}

/

AES解密

@param encryptBytes 待解密的byte[]

@return 解密后的String

@throws Exception

/

public static String aesDecryptByBytes(byte[] encryptBytes) throws Exception {

Cipher cipher = CiphergetInstance(ALGORITHMSTR);

byte[] temp = IVgetBytes("UTF-8");

IvParameterSpec iv = new IvParameterSpec(temp);

cipherinit(CipherDECRYPT_MODE, new SecretKeySpec(KEYgetBytes(), "AES"), iv);

byte[] decryptBytes = cipherdoFinal(encryptBytes);

Systemoutprint(new String(decryptBytes));

return new String(decryptBytes);

}

/

将base 64 code AES解密

@param encryptStr 待解密的base 64 code

@return 解密后的string

@throws Exception

/

public static String aesDecrypt(String encryptStr) throws Exception {

return StringUtilsisEmpty(encryptStr) null : aesDecryptByBytes(base64Decode(encryptStr));

}

//测试一下

public static void main(String[] args) throws Exception {

String str = "Q uus tQvLdwtGSldhrtKQ==";

str = strreplace(" ", "+");

Systemoutprintln(str);

aesDecrypt(str);

}

}

5，在密码验证的java页面做解密，建议打断点看看走的哪里，解密很简单，就一句

password = AESUtilsaesDecrypt(getPassword

问题原因：

当执行获取dom节点的value值代码，类似这三行时：

var oldPaw = $('#oldPaw')val();

var newPaw = $('#newPaw')val();

var newPawConf = $('#newPawConf')val();

页面中的输入框里是空的，它们此时的值为undefined。页面渲染完成时，你的代码已经执行完了，当你再次往输入框里输入数据时，你获取input框value值的代码不会再次执行了。

2解决方案：

$('btn')click(function() {

           var oldPaw = $('#oldPaw')val();

           var newPaw = $('#newPaw')val();

           var newPawConf = $('#newPawConf')val();

           consolelog(oldPaw, newPaw, newPawConf);

       })

把获取value值的代码放到click事件中，当点击按钮是再执行获取value值的代码，这样就不会再出现这种问题了。

3总结：

获取页面dom元素的时机问题，要在恰当的时机执行某些js代码，把js代码放到各种事件里面，当触发该事件时再执行你的js代码。

4类似问题：

页面中有，碰到网络问题或者过大时，用js获取该时获取不到，原因就是浏览器解析js代码时并没有加载完成，所以取不到值。因此，你经常可以看到js文件中会出现如下代码：

windowonload = function(){ };//加载完页面所有元素后执行（包括、文件等）

// 或者

$(function(){ });//加载完页面所有dom节点后执行里面的代码

以上就是关于非vue项目在js里使用jsencrypt全部的内容，包括:非vue项目在js里使用jsencrypt、前端页面显示了签名的密钥怎么办、js无法获取密码框的值。为什么T_T等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！