Web前后端笔记-vue封装http请求添加signature及后端(Java)解析并验证
发布日期:2021-06-30 10:43:14 浏览次数:2 分类:技术文章

本文共 4372 字,大约阅读时间需要 14 分钟。

 

首先帖下运行截图:

签名过期情况:

签名错误情况:

这里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版本用其他类

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

对应的XInterceptor如下:

public class XInterceptor implements HandlerInterceptor {    @Override    public 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
parameterNames = httpServletRequest.getParameterNames(); Map
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; } @Override public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception { } @Override public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception { }}

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

 

这里调用httpServletResponse.sendError会被、

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

会集中到error中处理

转载地址:https://it1995.blog.csdn.net/article/details/106191625 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Web前后端笔记-vue cli及java进行AES加解密
下一篇:Android逆向笔记-通过字符串定位跳转点

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年05月01日 00时23分57秒