VUE前端实现加密、后端JAVA实现解密功能

深藏阁楼爱情的钟 2022-12-11 04:24 481阅读 0赞

### 文章目录 ###

*  1：vue实现加密过程
 *  2：java部分
 *  3：转载地址

# 1：vue实现加密过程 #

1.  安装crypto-js

npm install crypto-js 或者yarn add crypto-js

或者

npm install crypto-js --save-dev

1.  在utils下新建secret.js

> 当然secret.js只是一个名字，叫什么高兴就好

import CryptoJS from 'crypto-js/crypto-js'
    
    // 默认的 KEY 与 iv 如果没有给
    const KEY = CryptoJS.enc.Utf8.parse("1234567890123456");
    const IV = CryptoJS.enc.Utf8.parse('1234567890123456');
    /**
     * AES加密 ：字符串 key iv  返回base64
     */
    export function Encrypt(word, keyStr, ivStr) { 
      let key = KEY;
      let iv = IV;
      if (keyStr) { 
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
      }
      let srcs = CryptoJS.enc.Utf8.parse(word);
      var encrypted = CryptoJS.AES.encrypt(srcs, key, { 
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
      });
      return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
    
    }
    /**
     * AES 解密 ：字符串 key iv  返回base64
     *
     * @return { string}
     */
    export function Decrypt(word, keyStr, ivStr) { 
      let key  = KEY;
      let iv = IV;
    
      if (keyStr) { 
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
      }
    
      let base64 = CryptoJS.enc.Base64.parse(word);
      let src = CryptoJS.enc.Base64.stringify(base64);
    
      let decrypt = CryptoJS.AES.decrypt(src, key, { 
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
      });
    
      let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
      return decryptedStr.toString();
    }

1.  在项目中使用（加密）

import { Encrypt,Decrypt} from '@/utils/secret'

handleSubmit () { 
    	  //加密用户名和密码
          let name = Encrypt(this.form.userName);
          let pwd = Encrypt(this.form.password);
          //以下代码可以理解为就是一个调用java接口的一个请求，当然贴出的代码并不是这样
          this.$refs.loginForm.validate((valid) => { 
            if (valid) { 
              this.$emit('on-success-valid', { 
                userName: name,
                password: pwd
              })
            }
          })
        }

# 2：java部分 #

1.  pom文件引入jar包

<dependency>
    		  <groupId>org.bouncycastle</groupId>
    		  <artifactId>bcprov-jdk15on</artifactId>
    		  <version>1.60</version>
    	  </dependency>

1.  新建工具类AesEncryptUtil

> AesEncryptUtil同样只是一个名字

package com.pactera.automl.common;
    
    import org.apache.commons.codec.binary.Base64;
    
    import javax.crypto.Cipher;
    import javax.crypto.spec.IvParameterSpec;
    import javax.crypto.spec.SecretKeySpec;
    
    /**
     * @author YSK
     * @date 2020/8/24 13:13
     */
    public class AesEncryptUtil { 
        /***
         * key和iv值可以随机生成
         */
        private static String KEY = "1234567890123456";
    
        private static String IV = "1234567890123456";
    
        /***
         * 加密
         * @param  data 要加密的数据
         * @return encrypt
         */
        public static String encrypt(String data){ 
            return encrypt(data, KEY, IV);
        }
    
        /***
         * param data 需要解密的数据
         * 调用desEncrypt（）方法
         */
        public static String desEncrypt(String data){ 
            return desEncrypt(data, KEY, IV);
        }
    
        /**
         * 加密方法
         * @param data  要加密的数据
         * @param key 加密key
         * @param iv 加密iv
         * @return 加密的结果
    
         */
        private static String encrypt(String data, String key, String iv){ 
            try { 
                //"算法/模式/补码方式"NoPadding PkcsPadding
                Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");
                int blockSize = cipher.getBlockSize();
    
                byte[] dataBytes = data.getBytes();
                int plaintextLength = dataBytes.length;
                if (plaintextLength % blockSize != 0) { 
                    plaintextLength = plaintextLength + (blockSize - (plaintextLength % blockSize));
                }
    
                byte[] plaintext = new byte[plaintextLength];
                System.arraycopy(dataBytes, 0, plaintext, 0, dataBytes.length);
    
                SecretKeySpec keyspec = new SecretKeySpec(key.getBytes(), "AES");
                IvParameterSpec ivspec = new IvParameterSpec(iv.getBytes());
    
                cipher.init(Cipher.ENCRYPT_MODE, keyspec, ivspec);
                byte[] encrypted = cipher.doFinal(plaintext);
    
                return new Base64().encodeToString(encrypted);
    
            } catch (Exception e) { 
                e.printStackTrace();
                return null;
            }
        }
    
        /**
         * 解密方法
         * @param data 要解密的数据
         * @param key  解密key
         * @param iv 解密iv
         * @return 解密的结果
         */
        private static String desEncrypt(String data, String key, String iv){ 
            try { 
                byte[] encrypted1 = new Base64().decode(data);
    
                Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");
                SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(), "AES");
                IvParameterSpec ivSpec = new IvParameterSpec(iv.getBytes());
                cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);
                byte[] original = cipher.doFinal(encrypted1);
                return new String(original).trim();
            } catch (Exception e) { 
                e.printStackTrace();
                return null;
            }
        }
    }

1.  解密

> 将加密后的用户名和密码由前端传到后端，后端成功接收后就可以调用工具类的desEncrypt方法解密

String userName = AesEncryptUtil.desEncrypt(userInfo.getUserName());
    		String passWord = AesEncryptUtil.desEncrypt(userInfo.getPassword());
    		log.info("username : {} , pwd : {} ",userName,passWord);

# 3：转载地址 #

1.  https://blog.csdn.net/weixin\_44082001/article/details/108216776?utm\_medium=distribute.pc\_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242
2.  https://blog.csdn.net/Aria\_Miazzy/article/details/100347899
3.  https://www.cnblogs.com/lyt0207/p/12807433.html