vue项目加密之AES加密

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在我们做项目的时候，经常会遇到一些加密的需求，防止用户通过发f12看到一些用户的信息，废话不多说，开搞了

AES加密

1.安装crypto-js

npm install crypto-js --save-dev

2.在工具类utils新建一哥crypto.js的文件

3.在新建文件夹内复制以下代码

/**
 * 工具类
 */
import Vue from \'vue\'
import CryptoJS from \'crypto-js\'
export default { //加密
  // qwerrtyhfgfbvvcfdffd 同后端商量的一个加密码，前后端要统一
  encrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : \'qwerrtyhfgfbvvcfdff\';
    var key = CryptoJS.enc.Utf8.parse(keyStr); //Latin1 w8m31+Yy/Nw6thPsMpO5fg==
    var srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
  },
  //解密
  decrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : \'qwerrtyhfgfbvvcfdff\';
    var key = CryptoJS.enc.Utf8.parse(keyStr); //Latin1 w8m31+Yy/Nw6thPsMpO5fg==
    var decrypt = CryptoJS.AES.decrypt(word, key, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
  }
}

4.简单使用

在需要使用加密的页面中调用crypto.js文件

import crypto from \'../utils/crypto.js\'

完整页面代码（仅供参考）

<template>
  <div></div>
</template>
<script>
import crypto from "../utils/crypto.js";
export default {
  data() {
    return {};
  },
  methods: {
    aes() {
      var a = crypto.encrypt("我进行加密");
      var b = crypto.decrypt(a);
      console.log(a, "加密的密文");
      console.log(b, "解密成功的密文");
    },
  },
  mounted() {
    this.aes();
  },
};
</script>

5.简单效果展示

6.进阶使用

我们在某些时候的需求往往不是那么简单，我们不可能每一个接口都调用一次，所以需要在拦截器中进行设置

6.1 在接口拦截器文件内引用

import crypto from \'./crypto.js\'

6.2 请求的时候进行加密

6.3 请求成功的时候进行解密

6.4 api请求时转化为json

6.5 测试登录


点击登录


我们可以看到拦截器设置的加密和我们文件引入设置的加密完全一致，证明是成功的

成功之后在拦截器内也有设置解密，所以不需要在文件内在解密一次了，直接可以打印出res的。

6.6 文件内加密对象

 let postdata = {
        username: this.loginForm.loginName,
        password: this.loginForm.loginPassword
      };
 let postdata1 = util.encrypt(JSON.stringify(postdata))

6.7 文件内解密

  let response = JSON.parse(utils.decrypt(res.data))

7.后台Spring Boot文件

Aes.java

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
import org.apache.commons.codec.binary.Base64;
public class Aes {
    //密钥 (需要前端和后端保持一致)
    private static final String KEY = "abcdefgabcdefg12";  
    public static void main(String[] args) throws Exception {  
    	String encryptPassword = "CfMIyhzijEobTbtG9W24d55CwINGrmIj70WqrtPVKmwpgm63Ks7KoKUUuFN5uZch";
    	System.out.println("解密前：" + encryptPassword);  
    	String decryptPassword = Decrypt(encryptPassword, KEY);
    	System.out.println("解密后：" + decryptPassword);  
    } 
    /**
     * 加密    
     * @param sSrc
     * @param sKey
     * @return
     * @throws Exception
     */
    public static String Encrypt(String sSrc, String sKey) throws Exception {  
        if (sKey == null) {  
            System.out.print("Key为空null");  
            return null;  
        }  
        // 判断Key是否为16位  
        if (sKey.length() != 16) {  
            System.out.print("Key长度不是16位");
            return null;  
        }  
        byte[] raw = sKey.getBytes("utf-8");  
        SecretKeySpec skeySpec = new SecretKeySpec(raw, "AES");  
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");//"算法/模式/补码方式"  
        IvParameterSpec iv = new IvParameterSpec(sKey.getBytes());//使用CBC模式，需要一个向量iv，可增加加密算法的强度  
        cipher.init(Cipher.ENCRYPT_MODE, skeySpec, iv);  
        byte[] encrypted = cipher.doFinal(sSrc.getBytes());  
        return new Base64().encodeToString(encrypted);//此处使用BASE64做转码功能，同时能起到2次加密的作用。  
    }
    /**
    * 解密  
	* @param sSrc
	* @param sKey
	* @return
	* @throws Exception
	*/
	public static String Decrypt(String sSrc, String sKey) throws Exception {  
	   try {  
	       // 判断Key是否正确  
	       if (sKey == null) {  
	           System.out.print("Key为空null");  
	           return null;  
	       }  
	       // 判断Key是否为16位  
	       if (sKey.length() != 16) {  
	           System.out.print("Key长度不是16位");  
	           return null;  
	       }  
	       byte[] raw = sKey.getBytes("utf-8");  
	       SecretKeySpec skeySpec = new SecretKeySpec(raw, "AES");  
	       Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");  
	       IvParameterSpec iv = new IvParameterSpec(sKey.getBytes());  
	       cipher.init(Cipher.DECRYPT_MODE, skeySpec, iv);  
	       byte[] encrypted1 = new Base64().decode(sSrc);//先用base64解密  
	       try {  
	           byte[] original = cipher.doFinal(encrypted1);  
	           String originalString = new String(original,"utf-8");  
	           return originalString;  
	       } catch (Exception e) {  
	           System.out.println(e.toString());  
	           return null;  
	       }  
	   } catch (Exception ex) {  
	       System.out.println(ex.toString());  
	       return null;  
	   }  
	}
}

8.参考

https://www.cnblogs.com/maggieq8324/p/12057013.html

以上是 vue项目加密之AES加密 的全部内容， 来源链接： utcz.com/z/374567.html

回到顶部