前端加密用法简单介绍

这周工作的时候后端让我传某个参数对象要进行加密，之前传参还没试过进行加密了再传参，一开始还不太清楚要怎么加密。现在清楚了就写下来记录一下吧。

写之前先引用一下别人的一段话介绍一下吧

简介： crypto-js是谷歌开发的一个纯JavaScript的加密算法类库，可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有：MD5、SHA-1、SHA-256、AES、RSA、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等。

现在来说一下使用流程：

1.先把crypto-js的文件先下载下来引入进项目，这个是在github上的地址

或者 在vue项目直接安装

npm install crypto-js

2.创建一个加密解密文件来封装加密解密方法

import CryptoJS from 'crypto-js'

3.设置秘钥和秘钥偏移量

// 十六位作为密钥
const paw = CryptoJS.enc.Utf8.parse("PAW_KEY_XU123456");//这个要跟后端一致
// 十六位作为密钥偏移量
const iv = CryptoJS.enc.Utf8.parse("PAW_KEY_XU789456");

4.封装加密解密方法

//加密方法
export function encrypt(data) {
  if (typeof data === "object"){
      data = JSON.stringify(data);
  }
  const key = CryptoJS.enc.Utf8.parse(paw);
  const srcs = CryptoJS.enc.Utf8.parse(data);
  const encrypted = CryptoJS.AES.encrypt(srcs, key, { 
              mode: CryptoJS.mode.ECB, 
              padding: CryptoJS.pad.Pkcs7 
             });
  return encrypted.toString();
}
//解密方法
export function decrypt(data) {
  const key = CryptoJS.enc.Utf8.parse(paw);
  const decrypt = CryptoJS.AES.decrypt(data, key, { 
              mode: CryptoJS.mode.ECB, 
              padding: CryptoJS.pad.Pkcs7 
             });
  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}

5.直接导入使用加密解密方法就行了

文件加密上传下载例子

//上传时对文件进行加密
import CryptoJS from 'crypto-js'; 
function encryptFile(file, password) { 
    const reader = new FileReader(); 
    reader.onload = function (event) {
        // 获取文件的内容 
        const fileData = event.target.result; 
        // 使用密码加密文件内容 
        const encryptedData = CryptoJS.AES.encrypt(fileData, password).toString(); 
        // 返回加密后的数据 
        return encryptedData; 
    }; 
    rader.readAsDataURL(file); 
    // 读取文件内容 
}
//将加密的文件上传后端
function uploadEncryptedFile(file, password) { 
    const encryptedData = encryptFile(file, password); 
    const formData = new FormData(); 
    formData.append('file', encryptedData); 
    axios.post({
        url: '/upload',
        body: formData 
        }) 
        .then(response => response.json()) 
        .then(data => console.log('File uploaded successfully:', data)) 
        .catch(error => console.error('Error uploading file:', error)); 
     }
     
//对文件进行解密
function decryptFile(encryptedData, password) {
  const bytes = CryptoJS.AES.decrypt(encryptedData, password);
  const decryptedData = bytes.toString(CryptoJS.enc.Utf8);
  return decryptedData;
}
//下载文件
function downloadFile(encryptedData, password) {
  const decryptedData = decryptFile(encryptedData, password);

  const blob = new Blob([decryptedData], { type: 'application/octet-stream' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'decryptedFile.txt';
  link.click();
}