1 .前端

1、安装 crypto-js

npm install crypto-js

2、封装加密方式

①新建方法

import CryptoJS from "crypto-js";

module.exports = {
    /**
     * AES加密
     * @param {Object} data 待加密的数据
     * @param {Object} key 密钥
     */
    encrypt(str, keyStr, ivStr) {
        const data = JSON.stringify(str);
        const key = CryptoJS.enc.Utf8.parse(keyStr);   // 密钥key   后台提供 - cbc模式 32位字符
        const iv = CryptoJS.enc.Utf8.parse(ivStr);   // iv   后台提供 - cbc模式 16位字符

        const encryptedData = CryptoJS.AES.encrypt(data, key, {
            iv,
            mode: CryptoJS.mode.CBC, // 使用 CBC 模式
            padding: CryptoJS.pad.Pkcs7, // 使用 PKCS7 填充
        }).toString(); // 执行加密操作
        
        return encryptedData;
    },
},

②使用 ( uni-app举例，其他vue类似 )

/** 1. main.js 引入 **/
import { encrypt } from "./utils/crypto-js.js";
Vue.prototype.$encrypt = encrypt;

/** 2. 在封装请求地方处理 **/
// POST请求
let request = function(url, data, title = '加载中') {
    // 加密
    let _data = this.$encrypt( data , '32位KEY ','16位IV');
    ....
}

至此前端完成加密

2. 后端laravel

1. 创建中间件

php artisan make:middleware EncryptRequestMiddleware

2. 中间件处理解密

/** 中间件地址 app / HTTP / Middleware / EncryptRequestMiddleware  **/
public function handle(Request $request, Closure $next)
    {
        // 获取当前请求的路由信息
        $route = $request->route();
        $currentRouteName = $route->getName();
        
        // 定义你想要去除的接口路由名称，进行判断
        $excludedRoutes = [
            'wechat.oss', //路由名称
            'wechat.payment.notify',
        ];

        // 如果当前路由在去除列表中，直接放行
        if (in_array($currentRouteName, $excludedRoutes)) {
            return $next($request);
        }


        // 获取加密的参数
        $encryptedData = $request->data;
        $key = 'JrAg7qMi2wTFJnq5ssjJEo9xtEhPtSxX'; // 一个随机的 32 字节密钥
        $iv = '8Z2wMy7amABbqsRC'; // 一个随机的 16 字节初始向量
        $method = 'AES-256-CBC'; // 使用 AES-256-CBC 加密算法
        $decryptedData = openssl_decrypt(base64_decode($encryptedData), $method, $key, OPENSSL_RAW_DATA, $iv); // 执行解密操作
        
        if ($decryptedData === false) {
            return response()->json(['error' => '解密失败'], 403);
        }
        // 将解密后的参数设置回请求对象
        $request->merge(['decrypted_data' => json_decode($decryptedData)]);;

        return $next($request);
    }

3. 注册全局中间件

/**在 App\Http\Kernel 类中**/
protected $middlewareGroups = [
     ...
     'api' => [
         ...
       \App\Http\Middleware\EncryptRequestMiddleware::class,
     ],
];

4. 请求处理

...
public function index(Request $request){
     $data = $request->decrypted_data;      // $data 就是前端请求数据
     $id = $data->id;
     ...
}

至此完成加密解密操作