在我們做項目的時候，經常會遇到一些加密的需求，防止用戶通過發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;
}
}
}