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

 更新时间:2023年01月19日 10:12:39   作者:yw00yw  
这篇文章主要介绍了使用md5在vue中的axios请求时加密API问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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系统登录密码、数字签名等诸多方

总结

1、接口调用方和接口提供方约定好统一的参数加密算法

2、接口调用方在调用时把加密后的_sign放在参数中去请求接口

3、接口提供方接到响应后,判断时间戳是不是在有效时间内(这个时间间隔根据你的安全范围可以是10分钟,5分钟,20秒等,过期失效,前提是需要保证接口提供方和调用方的服务器时间为准确的网络同步时间)

4、把参数中除了_sign以外的参数进行加密,然后把加密结果和传过来的_sign比较,相同则执行调用请求。

5、如果服务器和客户端的时间没有同步,可以返回错误的同时候在返回一个服务器的当前时间,客户端接收到该错误后再请求上一个接口,时间则传服务器刚刚返回的时间

6、如果用户还没有登录时,还没有token之类的唯一标识时,可以和服务端定义一个固定的标识来使用就行。

7、涉及到比较重要的信息,可以用AES对value进行加密,防止抓包拉取到上传的数据。

8、追求安全可以考虑https的双向验证模式 + 参数的sign签名的规则双重验证达到安全的请求后台。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解如何搭建mpvue框架搭配vant组件库的小程序项目

    详解如何搭建mpvue框架搭配vant组件库的小程序项目

    这篇文章主要介绍了详解如何搭建mpvue框架搭配vant组件库的小程序项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue.js中的下载和调用方式

    Vue.js中的下载和调用方式

    这篇文章主要介绍了Vue.js中的下载和调用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • VUE+elementui面包屑实现动态路由详解

    VUE+elementui面包屑实现动态路由详解

    今天小编就为大家分享一篇VUE+elementui面包屑实现动态路由详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue实现6位数密码效果

    Vue实现6位数密码效果

    这篇文章主要为大家详细介绍了Vue实现6位数密码,优化iOS WebView卡顿,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • Vue + Elementui实现多标签页共存的方法

    Vue + Elementui实现多标签页共存的方法

    这篇文章主要介绍了Vue + Elementui实现多标签页共存的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue2中Element DatePicker组件设置默认日期及控制日期范围

    Vue2中Element DatePicker组件设置默认日期及控制日期范围

    后台项目想使用时间选择器选择一段时间进行数据筛选,所以下面这篇文章主要给大家介绍了关于Vue2中Element DatePicker组件设置默认日期及控制日期范围的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 解决vue.js提交数组时出现数组下标的问题

    解决vue.js提交数组时出现数组下标的问题

    今天小编就为大家分享一篇解决vue.js提交数组时出现数组下标的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 如何使用HBuilderX把vue项目打包成apk

    如何使用HBuilderX把vue项目打包成apk

    这篇文章主要介绍了如何使用HBuilderX把vue项目打包成apk,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue中动态Class实战示例

    Vue中动态Class实战示例

    这篇文章主要为大家介绍了Vue中动态Class的实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    今天小编就为大家分享一篇关于Vue唯一可以更改vuex实例中state数据状态的属性对象,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01

最新评论