?

首先帖下運行截圖：

簽名過期情況：

簽名錯誤情況：

這里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)解析并验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。