crypto-js 加密
这是我参与「第四届青训营 」笔记创作活动的第4天。
有时候项目涉及到的敏感数据比较多，为了信息安全，我们常常需要对一些数据进行加密处理，如编码、将明文转化为暗文、加密比对、AES + BASE64 算法加密等。
这里简单介绍一下aes：使用 crypto-js 进行前端加密。
安装
npm install crypto-js
npm install --save @types/crypto-js
我这里使用的是 TypeScript ，所以需要运行第 2 条安装 @types 版本。
声明
在 utils 下新建一个 aes.ts 文件，内容如下：
import CryptoJS from "crypto-js";
const key = CryptoJS.enc.Utf8.parse("AOWQ4P0YEC4YXUKS"); //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse("O3V2GCL1K2HNZ9Y7"); //十六位十六进制数作为密钥偏移量
//解密方法
export function Decrypt(word: string) {
const encryptedHexStr = CryptoJS.enc.Hex.parse(word);
const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
const decrypt = CryptoJS.AES.decrypt(srcs, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
//加密方法
export function Encrypt(word: string) {
const srcs = CryptoJS.enc.Utf8.parse(word);
const encrypted = CryptoJS.AES.encrypt(srcs, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
return encrypted.ciphertext.toString().toUpperCase();
}
上面的代码中的 key 是密钥 ，iv 是密钥偏移量，这个一般是后端接口返回的，为了方便，这里就直接在这里定义了。
值得注意的是密钥的长度，由于对称解密使用的算法是 AES-128-CBC算法，数据采用 PKCS7 填充 ， 因此这里的 key 需要为16位！
接着我们定义了 解密方法Decrypt 和 加密方法 Encrypt ，最后通过 export default 将其暴露出去，方便在需要的时候进行引入~
使用
在 register、login 等需要对密码进行加密的文件中使用。
<script setup lang="ts">
// vue
import { reactive, ref } from "vue";
......
// 加密
import { Encrypt } from "@/utils/aes";
......
//账号密码登录
const ruleFormRef = ref("");
const ruleForm = reactive({
username: "",
userpwd: "",
});
const rules = reactive({
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 11, message: "请输入3-11位用户名", trigger: "blur" },
],
userpwd: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 3, max: 11, message: "请输入3-11位密码", trigger: "blur" },
],
});
//账号密码点击注册
const userBtnR = (formEl: any) => {
if (!formEl) return;
formEl.validate((valid: unknown, fields: unknown) => {
if (valid) {
register({
username: Encrypt(ruleForm.username), //<=================
password: Encrypt(ruleForm.userpwd), //<=================
}).then((res: any) => {
console.log(res);
if (res.code != "0") {
ElMessage({
message: res.message,
type: "error",
});
}
});
} else {
console.log("error submit!", fields, valid);
}
});
};
</script>
总结
本文主要简单介绍了一下 crypto-js 的一种使用方法，更多配置和使用方式在这里【cryptojs.gitbook.io/docs/】
