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;
    }
相关推荐
人工智能训练5 小时前
前端框架选型破局指南:Vue、React、Next.js 从差异到落地全解析
运维·javascript·人工智能·前端框架·vue·react·next.js
李纲明2 天前
WordPress外贸成品网站的免费获取渠道
vue·php
加洛斯2 天前
前端小知识002:ref 与 reactive 详解
前端·vue
ghie90902 天前
基于ThinkPHP实现动态ZIP压缩包的生成
thinkphp
计算机毕设vx_bysj68693 天前
计算机毕业设计必看必学~Springboot教学进度管理系统,原创定制程序、单片机、java、PHP、Python、小程序、文案全套、毕设成品等!
java·spring boot·vue·课程设计·管理系统
小贺要学前端3 天前
【无标题】
前端·javascript·vue·技术趋势
IT教程资源C4 天前
(N_141)基于springboot,vue网上拍卖平台
mysql·vue·前后端分离·拍卖系统·springboot拍卖
IT教程资源C4 天前
(N_144)基于微信小程序在线订餐系统
mysql·vue·uniapp·前后端分离·订餐小程序·springboot订餐
合作小小程序员小小店4 天前
web网页开发,在线短视频管理系统,基于Idea,html,css,jQuery,java,springboot,mysql。
java·前端·spring boot·mysql·vue·intellij-idea
aiguangyuan4 天前
Vue 3.0 源码解读
vue·前端开发