前端引用DES（加解密）

   前端基于ElementUI Vue3 为一体的开发

• npm install crypto-js
• 配置文件添加如下内容

import CryptoJS from 'crypto-js';

export default {
    //解密
    decrypt(word) {
        const iv = process.env.VUE_APP_DES_IV
        const keyStr = process.env.VUE_APP_DES_KEY
        let keyHex = CryptoJS.enc.Utf8.parse(keyStr);
        let decrypted = CryptoJS.DES.decrypt({
            ciphertext: CryptoJS.enc.Hex.parse(word)
        }, keyHex, {
            iv: CryptoJS.enc.Utf8.parse(iv),
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
        return decrypted.toString(CryptoJS.enc.Utf8);
    },
    //加密
    encrypt(word) {
        const iv = process.env.VUE_APP_DES_IV
        const keyStr = process.env.VUE_APP_DES_KEY
        let keyHex = CryptoJS.enc.Utf8.parse(keyStr);
        let encrypted = CryptoJS.DES.encrypt(word,
            keyHex, {
                mode: CryptoJS.mode.CBC, // ecb模式不需要偏移量
                padding: CryptoJS.pad.Pkcs7,
                iv: CryptoJS.enc.Utf8.parse(iv)
            });
        let hexstr = encrypted.ciphertext.toString();
        return hexstr;
    },

}

• 前端请求封装处理

/* eslint-disable no-unused-vars */
import axios from 'axios';
import router from '@/pis/router'
import {
    Message
} from 'element-ui';
import aes from './aes.js'

if ((location.host.indexOf("pis") != -1)) {
    axios.get('/productapi/token').then((res) => {
        axios.defaults.headers.common['X-CSRF-TOKEN'] = res.data;
        axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    });
}

const service = axios.create({
    timeout: 30000,
    withCredentials: false,
});

const openDes = process.env.VUE_APP_OPEN_DES == 'true' ? true : false;
// 加密
service.interceptors.request.use(
    config => {
        if (openDes && config.method == 'post') {
            if (config.headers['Content-Type'] != 'multipart/form-data') {
                config.data = aes.encrypt(JSON.stringify(config.data));
            }
        }
        return config;
    },
    error => {
        return Promise.reject();
    }
);

// 解密
service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            if (openDes && !response.data.status) {
                response.data = aes.decrypt(response.data);
                response.data = JSON.parse(response.data);
            }
            if (response.data.status != '200') {
                let message = response.data.message ? response.data.message : '出错了，请刷新页面重新执行！';
                Message({
                    type: 'error',
                    message: message,
                })
            }
            return response.data;
        } else {
            Promise.reject();
        }
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                case 419:
                    localStorage.removeItem('store');
                    router.replace({
                        path: "/login",
                    });
                    break;
                case 500:
                    Message({
                        type: 'error',
                        message: '出错了，请刷新页面重新执行！',
                    });
                    break;
            }
        }
        return Promise.reject(error);
    }
);

export default service;

后端DES（加解密）

/**
 * @des 3DES加密算法,cbc模式,pkcs5Padding字符填充方式
 * des-ede3-cbc
 */
class Des
{
    final public static function encrypt($input, $key, $iv)
    {
        $data = @openssl_encrypt($input, 'DES-CBC', $key, OPENSSL_RAW_DATA, $iv);
        $data = bin2hex($data);
        return $data;
    }

    final public static function decrypt($encrypted, $key, $iv)
    {
        $encrypted = hex2bin($encrypted);
        $data = @openssl_decrypt($encrypted,'DES-CBC', $key, OPENSSL_RAW_DATA, $iv);
        $data = json_decode($data);
        return $data;
    }

}

**********  实例调用 ***********
<?php
namespace app\security\controller;

use app\BaseController;
use think\facade\Request;
use utils\algorithm\Des;

class Index extends BaseController
{

    protected $des_key = "xxxxx";
    protected $des_iv = "xxxxx";

    /**
     * 解密
     * @return json 业务处理响应结果
     */
    public function decrypt($data)
    {
        if (mode() == 'd'&&$data) {
            $des = new Des();
            $effect = $des->decrypt($data, $this->des_key, $this->des_iv);
            return $effect;
        } else {
            return json_decode($data);
        }

    }

    /**
     * 加密
     * @return json 业务处理响应结果
     */
    public function encrypt($data)
    {
        if (mode() == 'd'&&$data) {
            $des = new Des();
            $json_str = json_encode($data);
            $effect = $des->encrypt($json_str, $this->des_key, $this->des_iv);
            return $effect;
        } else {
            return $data;
        }
    }

    /**
     * 用户登录 xz
     * @api /index/Index/demo
     */
    public function demo()
    {
        $payload = Request::getInput();
        $payload = $this->decrypt($payload);
        if (empty($payload)) {
            return json(['code' => 400, 'msg' => '请求参数不能为空']);
        }
        $data = (new User)->doLogin($payload);
        if ($data) {
            $data = $this->encrypt($data);
            return success($data);
        } else {
            return json(['code' => 400, 'msg' => '账号或密码信息有误', 'data' => null]);
        }
    }

更多文献参考：DES 3DES加密算法,cbc模式,pkcs5Padding字符填充方式