CryptoJS前端接口请求加密方案

ryder_yan

已于 2023-08-16 10:36:47 修改

阅读量546

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端

于 2023-08-16 10:28:53 首次发布

本文链接：https://blog.youkuaiyun.com/add_ysd/article/details/132313841

本文介绍了如何使用crypto-js库进行前后端约定的加密过程，包括密钥存储、随机生成iv、时间戳加入和在axios请求拦截器中应用加密信息以确保安全通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前使用的是 crypto-js 进行加密
加密构想如下：
1.和后端约定加密密钥，前端存储密钥首先进行base64加密
2.随机生成16位乱码生成iv偏移量
3.约定好加密参数word格式
加密word设计：特殊标识 + 年月日时分秒（20201010110101）
后端获取后匹配当前时间防止接口挟持

代码如下~

import CryptoJS from 'crypto-js';

export function encrypt() {
	let keyStr = "加密密钥";//此处为你的加密密钥
	keyStr = new Buffer(keyStr, 'base64').toString('utf8')
	// keyStr = atob(keyStr);
	let ivStr = getRanHex(16);
	let noIv = ivStr
	let word = getWord();
	let key = CryptoJS.enc.Utf8.parse(keyStr);
	let iv = CryptoJS.enc.Utf8.parse(ivStr);
	let srcs = CryptoJS.enc.Utf8.parse(word);
	let encrypted = CryptoJS.AES.encrypt(srcs, key, {
		iv: iv,
		mode: CryptoJS.mode.CBC,
		padding: CryptoJS.pad.Pkcs7,
	});
	return ivStr + encrypted.toString();
}
// 生成16位乱码字符串
function getRanHex(size) {
	let result = [];
	let hexRef = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
		'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
	];
	for (let n = 0; n < size; n++) {
		result.push(hexRef[Math.floor(Math.random() * 16)]);
	}
	return result.join('');
}
export function getWord() {
	let PlatformIdentification = "qianzhui";//前缀输入自己的前缀即可
	let timeString = "";
	let date = new Date() // 获取时间
	let year = date.getFullYear() // 获取年
	let month = date.getMonth() + 1 // 获取月
	if (month < 10) month = `0${month}`;
	let strDate = date.getDate() // 获取日
	if (strDate < 10) strDate = `0${strDate}`;
	let hour = date.getHours();
	if (hour < 10) hour = `0${hour}`;
	let minute = date.getMinutes();
	if (minute < 10) minute = `0${minute}`;
	let second = date.getSeconds();
	if (second < 10) second = `0${second}`;

	timeString = `${year}${month}${strDate}${hour}${minute}${second}`
	return `${PlatformIdentification}${timeString}`
}

此时加密密文已经生成好了，在请求拦截器里添加至消息头 Authorization 中即可！

拦截器部分代码

axios.interceptors.request.use( c => { 
	// reqIndex ++; console.log('当前reqIndex = ' + reqIndex); //[测试]
	let Authorization = encrypt();
	if(c.loading) uni.showLoading({mask: true});  // 显示loading 
	c.headers['Authorization'] = Authorization; // 加密签名     
	if(c.mock) c.baseURL = config.MockDomain; // 模拟api的请求地址
	return c;
})