使用md5在vue中的axios请求时加密API问题

2023-01-28 06:04

短信预约 -IT技能 免费直播动态提醒

md5在vue中的axios请求时加密API

1.安装axios

npm install axios

2.安装MD5

npm install js-md5

3.在vue项目中得main.js中全局引入

import axios from 'axios';
import md5 from 'js-md5';

4.在main.js中加入以下代码

const http = axios.create({ 	// 创建一个拥有通用配置的axios实例
 	timeout: 1000 * 30,	       // 请求超时时间（毫秒）
	withCredentials: true,	  // 是否携带cookie信息
	headers: {               // 头部信息
    	'Content-Type': 'application/json; charset=utf-8'
    }
})

http.interceptors.request.use(config => { 		//添加一个请求拦截器
	      // 请求头带上token	在发送请求之前做某事
	      let time = new Date().getTime();
	      config.params['time'] = time;
	      config.headers['sign'] = md5('与后台对应的字符串'+time);
	      return config
    }, error => {
    	  return Promise.reject(error)
})

Vue.prototype.$axios= http;

5.在组件中运用axios即可

this.$axios({
     method: 'POST',
     url:'项目的请求地址',
     params: params
}).then((res)=>{
    //成功的回调
    console.log(res)；
},function(error){
    //失败的回调
    console.log(error);
})

接口安全要求

防伪装攻击（案例：在公共网络环境中，第三方有意或恶意的调用我们的接口）
防篡改攻击（案例：在公共网络环境中，请求头/查询字符串/内容在传输过程被修改）
防重放攻击（案例：在公共网络环境中，请求被截获，稍后被重放或多次重放）
防数据信息泄漏（案例：截获用户登录请求，截获到账号、密码等）

接口参数签名实现思路参考

必要的输入参数：

签名算法过程：

1. 对除签名外的所有请求参数按key做的升序排列,value无需编码。（假设当前时间的时间戳是12345678）

例如：有c=3,b=2,a=1 三个参，另加上时间戳后，按key排序后为：a=1，b=2，c=3，_timestamp=12345678。

2. 把参数名和参数值连接成字符串，得到拼装字符：a1b2c3_timestamp12345678

3. 用申请到的appkey 连接到接拼装字符串头部和尾部，然后进行32位MD5加密，最后将到得MD5加密摘要转化成大写。

示例：假设appkey=test，md5(testa1b2c3_timestamp12345678test)，取得MD5摘要值 C5F3EB5D7DC2748AED89E90AF00081E6 。

MD5加密算法：MD5为计算机安全领域广泛使用的一种散列函数，用以提供消息的完整性保护。对MD5加密算法简要的叙述可以为：MD5以512位分组来处理输入的信息，且每一分组又被划分为16个32位子分组，经过了一系列的处理后，算法的输出由四个32位分组组成，将这四个32位分组级联后将生成—个128位散列值。

MD5被广泛用于各种软件的密码认证和钥匙识别上。MD5用的是哈希函数，它的典型应用是对一段信息产生信息摘要，以防止被篡改。MD5的典型应用是对一段Message产生fingerprin指纹，以防止被“篡改”。如果再有—个第三方的认证机构，用MD5还可以防止文件作者的“抵赖”，这就是所谓的数字签名应用。MD5还广泛用于操作系统的登陆认证上，如UNIX、各类BSD系统登录密码、数字签名等诸多方