vue3.2实现AES加密解密,秘钥通过API获取,并混淆秘钥,后端thinkphp

aes.ts文件

javascript 复制代码
import CryptoJS from "crypto-js";
import axios from "axios";

export const encrypt = async(data: any) => {
  let storeKey = sessionStorage.getItem('a')
  let storeIv:any = sessionStorage.getItem('i')
  // 如果秘钥或 IV 不存在,尝试获取秘钥
  if (!storeKey || !storeIv) {
    await fetchSecretKey(); // 确保秘钥已被获取
    storeKey = sessionStorage.getItem('a'); // 再次获取秘钥
    storeIv = sessionStorage.getItem('i'); // 再次获取 IV
  }

  if (!storeKey || !storeIv) {
    throw new Error("秘钥或 IV 不存在.");
  }
  let secretKey = storeKey.replace('FiedGSe5fg6', '').replace('F//Eset5fGDet', '')
  let key = CryptoJS.enc.Base64.parse(secretKey);
  let replaceIv = storeIv.replace('DGers', '').replace('HrdReK', '')
  let iv = CryptoJS.enc.Utf8.parse(replaceIv)
  let srcs = CryptoJS.enc.Utf8.parse(JSON.stringify(data));

  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });

  return encrypted.toString();
};

export const decrypt = async(cipherText: any) => {
  let storeKey = sessionStorage.getItem('a')
  let storeIv:any = sessionStorage.getItem('i')
  // 如果秘钥或 IV 不存在,尝试获取秘钥
  if (!storeKey || !storeIv) {
    await fetchSecretKey(); // 确保秘钥已被获取
    storeKey = sessionStorage.getItem('a'); // 再次获取秘钥
    storeIv = sessionStorage.getItem('i'); // 再次获取 IV
  }

  if (!storeKey || !storeIv) {
    throw new Error("秘钥或 IV 不存在.");
  }
  let secretKey = storeKey.replace('FiedGSe5fg6', '').replace('F//Eset5fGDet', '')
  let key = CryptoJS.enc.Base64.parse(secretKey);
  let replaceIv = storeIv.replace('DGers', '').replace('HrdReK', '')
  let iv = CryptoJS.enc.Utf8.parse(replaceIv)
  const decrypted = CryptoJS.AES.decrypt(cipherText, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });

  return decrypted.toString(CryptoJS.enc.Utf8);
};


// 获取秘钥并存储在会话缓存中
export const fetchSecretKey = async () => {
  // 检查会话缓存中是否已经有秘钥
  const cachedKey = sessionStorage.getItem('a');
  
  if (cachedKey) {
    return;
  }

  try {
    // 获取当前时间戳
    const timestamp = Date.now();
    const nonce = generateNonce(); // 生成随机 nonce

    // 临时使用一个默认的签名密钥,可以替换为你后端使用的密钥
    const tempSecret = 'defaultSecretKey';
    const signature = generateSignature(tempSecret, timestamp, nonce); // 生成签名

    // 发送请求获取秘钥,带上签名
    const response = await axios.post('/api_getKey', {
      timestamp,
      nonce,
      signature,
    });
    const rawKey = response.data.aesKey;
    // 存储到会话缓存中
    sessionStorage.setItem('a', rawKey);
    sessionStorage.setItem('i', response.data.iv);

  } catch (error) {
    console.error('Error fetching secret key:', error);
  }
};

// 初始化函数,只有第一次项目打开时才执行获取秘钥的逻辑
export const initializeSecretKey = async () => {
  const secretKey = sessionStorage.getItem('a')
  if (!secretKey) {
    await fetchSecretKey(); // 调用获取秘钥的函数
  }
};

// 生成随机字符串作为 nonce
const generateNonce = (): string => {
  return Math.random().toString(36).substr(2, 15);
};

// 生成签名
const generateSignature = (secretKey: string, timestamp: number, nonce: string): string => {
  const message = `${secretKey}${timestamp}${nonce}`;
  return CryptoJS.SHA256(message).toString();
};

后端

php 复制代码
// 获取加密密钥的 API 接口
    public function getKey()
    {
        // 获取请求参数
        $timestamp = Request::post('timestamp');
        $nonce = Request::post('nonce');
        $signature = Request::post('signature');

        // 验证签名
        if (!$this->verifySignature($timestamp, $nonce, $signature)) {
            return json(['error' => '无效签名或请求已过期'], 403);
        }

        // 签名验证通过后,返回密钥(或其他敏感信息)
        // AES密钥 
        $secretKey = '秘钥';
        // 1Ww;w(czeHDyFN@T   DGers  HrdReK
        $iv = '向量'; 
        return json(['aesKey' => $secretKey,'iv' => $iv]);
    }

    // 签名验证
    private function verifySignature($timestamp, $nonce, $signature)
    {
        // 检查时间戳是否在合理范围内(例如5分钟内)
        $now = time() * 1000; // 转换为毫秒
        if (abs($now - $timestamp) > 5 * 60 * 1000) {
            return false; // 请求超时
        }

        // 重新生成签名
        $dataToSign = 'defaultSecretKey' . $timestamp . $nonce;
        $serverSignature = hash('sha256', $dataToSign);

        // 比较客户端的签名与服务器生成的签名是否一致
        if ($serverSignature !== $signature) {
            return false; // 签名不匹配
        }

        // 如果签名正确,返回 true
        return true;
    }
相关推荐
南_山无梅落1 天前
从传统Web到API驱动:使用Django REST Framework重构智能合同审查系统
重构·django·vue·drf
PD我是你的真爱粉2 天前
API 请求封装(Axios + 拦截器 + 错误处理)
前端框架·vue
biyezuopinvip4 天前
基于Spring Boot的投资理财系统设计与实现(毕业论文)
java·spring boot·vue·毕业设计·论文·毕业论文·投资理财系统设计与实现
biyezuopinvip4 天前
基于Spring Boot的投资理财系统设计与实现(任务书)
java·spring boot·vue·毕业设计·论文·任务书·投资理财系统设计与实现
huohuopro4 天前
Vue3 Webview 转 Android 虚拟导航栏遮挡问题记录
android·vue
码界筑梦坊5 天前
332-基于XGBoost与SHAP的可穿戴设备亚健康风险识别系统
python·数据分析·flask·vue·毕业设计
上单带刀不带妹5 天前
【Axios 实战】网络图片地址转 File 对象,附跨域解决方案
开发语言·前端·javascript·vue
SuperEugene5 天前
前端模块化与 import/export入门:从「乱成一团」到「清晰可维护」
前端·javascript·面试·vue
~央千澈~6 天前
优雅草正版授权系统 - 优雅草科技开源2月20日正式发布
python·vue·php·授权验证系统
Roc.Chang7 天前
Vite 启动报错:listen EACCES: permission denied 0.0.0.0:80 解决方案
linux·前端·vue·vite