vue3+vite+ts之哈希算法HmacSHA256加密方法

---

前言

在最近的项目中需要用到的哈希算法加密签名，所以稍微的总结一下，这里包含：

1. 将对象转换为数组
2. 过滤掉值为空或加密方式的参数
3. 按照参数名（键）的ASCII码进行排序
4. 将字符串用&隔开,将{}去除,将:改成=,将"去除
5. 使用哈希算法（字符串解码） + 密钥 生成哈希值
6. 计算参数字符串的哈希值得到16进制
7. 通过Base64转化16进制得到签名
8. 使用类型断言重新赋值
9. 使用as关键字重新赋值

---

一、加载组件依赖文件

首先使用 npm install crypoto-js 加载组件依赖文件

二、使用步骤

1.引入库

代码如下（示例）：

//引入组件库
import CryptoJS from 'crypto-js';

// 定义一个对象类型
  type MyObject = {
    [key: string]: any; // 这里的any可以替换为具体的类型
  };
  // 定义一个函数将对象转换为数组
  export function objectToArray<T extends MyObject>(obj: T): Array<{ name: keyof T, value: T[keyof T] }> {
    return Object.keys(obj).map(key => ({ name: key as keyof T, value: obj[key] }));
  }


// 哈希HmacSHA256加密方法
  interface QueryParam {
    [key: string]: string | null;
  }
  export function sortObjectAndEncodeString(params: QueryParam): QueryParam {
    // 过滤掉值为空或加密方式的参数
    const filteredParams: QueryParam = {};
    for (const [key, value] of Object.entries(params)) {
        if (value !== null && value !== '[encrypted]'&& key !== 'sign' && key !== 'sign_algo') {
        filteredParams[key] = value;
        }
    }

    // 将对象转换为数组
    const arrayOfObjects = objectToArray(filteredParams);

    // 按照参数名（键）的ASCII码进行排序
    const newParams = arrayOfObjects.sort((a, b) => a.name.localeCompare(b.name));;
    
    // 使用URL键值对的格式拼接成字符串
    const stringA = newParams.map(person => JSON.stringify({
        [person.name]:person.value
       }));

    // 将字符串用&隔开,将{}去除,将:改成=,将"去除
    const newstringA = stringA.join('&').replace(/[{}]/g, '').replace(/:/g, '=').replace(/"/g, '')
   
    // 使用哈希算法（字符串解码） + 密钥 生成哈希值
    const hash = CryptoJS.HmacSHA256(decodeURIComponent(newstringA), 'EF8982DED6DE0A6A368DFB23DA1FC57C')
    
    // 计算参数字符串的哈希值得到16进制
    const Stringhash = CryptoJS.enc.Hex.stringify(hash);
    
    // 通过Base64转化16进制得到签名
    const base64String = btoa(Stringhash)
	 // 使用类型断言重新赋值
      //(fdata as { sign: string }).sign = base64String;
        
     // 使用as关键字重新赋值
     // (fdata.sign as string) = base64String;

    return {base64String}
    // 返回格式{base64String：XXX}
}

---

总结

以上内容为vue3+vite+ts 初学者笔记总结所用，初学者的我慢慢感受到了TS的深奥和神奇，共勉。