Web前后端笔记-vue封装http请求添加signature及后端(Java)解析并验证

 

首先帖下运行截图：

签名过期情况：

签名错误情况：

这里npm要导入js-md5，并且在main.js中添加

import md5 from 'js-md5' Vue.prototype.$md5 = md5;

首先来看下前端代码：

import axios from 'axios'axios.defaults.timeout = 35 * 1000;/*** Get方法* @param {*} url * @param {*} params */ export function fetch(url, params = {}){return new Promise((resolve, reject) => {params['timestamp'] = new Date().getTime();let oriInfo = "";for(let key in params){oriInfo += params[key] + "$";}let paraString = oriInfo.substr(0, oriInfo.length - 1);params['signature'] = this.$md5(paraString);axios.get(url, {params : params}).then(response => {resolve(response);}).catch(err => {reject(err)})}) }export function post(url, data = {}){return new Promise((resolve, reject) => {axios.post(url, data).then(response => {resolve(response);},err => {reject(err);})}) }

这里采用的是vue cli，axios要先npm install下。这里目前只对GET方法进行了处理。

 

在main.js中设置下全局的

import {fetch, post} from './xxx/xxx/http' Vue.prototype.$httpGet = fetch; Vue.prototype.$httpPost = post;

调用的时候使用这种方式就可以了

this.$httpGet('/xxx/xxx/xxx, {'tableName' : 'xxxxx'}).then((res)=> {//console.log(res);});

这里调用httpGet后会将头的数据生成xxx$xxx$xxx生成对应的dm5。

 

这里后端创建一个配置类，extends WebMvcConfigurerAdapter。

这里我用的是1.5.21，2.xx.xx版本用其他类

@Configuration public class MyMvcConfig extends WebMvcConfigurerAdapter {@Beanpublic WebMvcConfigurerAdapter webMvcConfigurerAdapter(){WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(new XInterceptor()).addPathPatterns("/xxx/**");}};return adapter;} }

对应的XInterceptor如下：

public class XInterceptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {if(httpServletRequest.getMethod().equals("GET")){String url = httpServletRequest.getRequestURI();String contextPath = httpServletRequest.getServletPath();String para = httpServletRequest.getQueryString();Enumeration<String> parameterNames = httpServletRequest.getParameterNames();Map<String, String[]> parameterMap = httpServletRequest.getParameterMap();//参数是否正常if(!parameterMap.containsKey("timestamp") || !parameterMap.containsKey("signature")){httpServletResponse.sendError(503);return false;}//先检测签名是否过期 30s内不会过期Long timestamp = Long.valueOf(parameterMap.get("timestamp")[0]);Long currentStamp = System.currentTimeMillis();if(timestamp < (currentStamp - 30 * 1000)){httpServletResponse.sendError(501);return false;}//检查签名是否合法String originStr = "";for(Enumeration key = parameterNames ; parameterNames.hasMoreElements();){String KeyPara = key.nextElement().toString();if(KeyPara.equals("signature"))continue;originStr += parameterMap.get(KeyPara)[0] + "$";}originStr = originStr.substring(0, originStr.length() - 1);String md5Str = MD5Utils.generateMD5(originStr);if(!md5Str.equals(parameterMap.get("signature")[0])){httpServletResponse.sendError(502);return false;}}else{}return true;}@Overridepublic void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {}@Overridepublic void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {} }

这里每一个timestamp生存时间为30s。

 

这里调用httpServletResponse.sendError会被、

@RestController public class ErrorController implements org.springframework.boot.autoconfigure.web.ErrorController {@RequestMapping("/error")public Object handleError(HttpServletRequest request){.........} }

会集中到error中处理

总结

以上是生活随笔为你收集整理的Web前后端笔记-vue封装http请求添加signature及后端(Java)解析并验证的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。