關于使用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對象。在傳遞給背景的加密資料中也是以字元串的形式形式傳遞給背景。背景接收的話自然有他們自己方法就不多說。

結語：

在使用的過程中，自己也去百度了很多方法。但是這些方法都沒有真正适合自己的，是以在開發過程中浪費了很多無謂的時間。不過好在最後解決了，這次記錄分享一下。希望能幫助有需要的人，有不足的地方請各位大佬多多包涵