前端引用DES（加解密）
前端基于ElementUI Vue3 为一体的开发
npm install crypto-js配置文件添加如下内容
import CryptoJS from 'crypto-js';export default {//解密decrypt(word) {const iv = process.env.VUE_APP_DES_IVconst keyStr = process.env.VUE_APP_DES_KEYlet 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_IVconst keyStr = process.env.VUE_APP_DES_KEYlet 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.mon['X-CSRF-TOKEN'] = res.data;axios.mon['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;}}********** 实例调用 ***********<?phpnamespace 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字符填充方式
