关于使用DES加密和解密的操作

关于使用DES加密和解密的操作

在前端的开发当中我们在和后端的交互中，有些用户数据或者信息是比较重要或者需要加强一些安全性。通常我们知道前端的加密方法有MD5，DES，AES,base64，RSA，sha1。今天就献丑大概说一下我在实际开发中的一些操作见解.有什么不足的地方请大佬多多指教

准备工作

项目是用vue-cli来开发，所以一些第三方插件或者包的话用npm来管理。对于我这种不细心的人来说，在知道需要用DES加密和解密的时候就直接去百度这些方法了，而忽略了一个重要的问题。就是Js本身有一个强大的加密/解密库，就是crypto-js。这个玩意非常强大，具体介绍的可以自行百度。所以后面在使用DES加密/解密的时候得用到这个东西。

上代码

1.首先在项目中引入crypto-js
1.1 通过npm下载

npm install crypto-js

当然在国内的话一般都是用淘宝镜像，毕竟快

cnpm install crypto-js --save --dev

2.在项目中创建一个js文件

这个文件里专门放置DES的加密/解密方法

3.在des.js中引入crypto-js

import CryptoJS from 'crypto-js'
export default class Helper {
    // 加密
    static encryptByDES(ciphertext, key) {
        let keyHex = CryptoJS.enc.Utf8.parse(key);
        let ivHex = CryptoJS.enc.Utf8.parse(key);
        let encrypted = CryptoJS.DES.encrypt(ciphertext, keyHex, {
            iv: ivHex,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
        return encrypted.ciphertext.toString().toUpperCase();
    }
    // 解密
    static decryptByDES(ciphertext, key) {
        let keyHex = CryptoJS.enc.Utf8.parse(key);
        let ivHex = CryptoJS.enc.Utf8.parse(key);
        let decrypted = CryptoJS.DES.decrypt({
                ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
            },
            keyHex, {
                iv: ivHex,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            }
        );
        return decrypted.toString(CryptoJS.enc.Utf8);
    }
}

现在准备工作已经完成了，来看下在和后台实际交互。废话不多直接上图

这是请求成功后台返回的给的加密格式，是以字符串的形式。刚开始比较懵逼，以为是自己请求错了。但具体看状态码是没问题，后来通过和后台沟通才知道是加密过的。所以这个时候就需要用到之前准备的那些东西了。
4.具体项目中的使用
4.1首先把刚才des.js文件引入到需要的组件当中

4.2使用引入的这个js文件里的加密/解密方法

4.3实际效果

通过解密以后拿到后台返回真正的信息。
PS：因为加密/解密给的数据类型都是字符串的，所以在解密完以后需要格式转换成对象，当然我用的JSON对象。在传递给后台的加密数据中也是以字符串的形式形式传递给后台。后台接收的话自然有他们自己方法就不多说。
结语：
在使用的过程中，自己也去百度了很多方法。但是这些方法都没有真正适合自己的，所以在开发过程中浪费了很多无谓的时间。不过好在最后解决了，这次记录分享一下。希望能帮助有需要的人，有不足的地方请各位大佬多多包涵