最近的新项目需要考虑到安全性的需求,为了防止别人盗刷接口,就在请求拦截器里对所有接口请求进行了参数加密校验,校验不通过后端就会将请求拦截,从而达到加密的目的。
前端加密逻辑
加密方法:
js
// utils/sign.js
import md5 from 'blueimp-md5'
// 密钥
const MD5_SIGN_KEY = 'abc123'
const md5Func = (obj) => {
let keys = Object.keys(obj).sort()
let sign = ''
keys.forEach(item => {
if (obj[item]) {
sign += obj[item].toString()
}
})
// 拼接密钥
sign += MD5_SIGN_KEY
// md5加密sign参数
return md5(sign)
}
export { md5Func }
前端拦截器配置:
js
// utils/http.js
import axios from 'axios'
import { md5Func } from '@/utils/sign'
const http = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
// request 拦截器
http.interceptors.request.use(
config => {
if (config.method.toLocaleUpperCase() === 'GET') {
config.query = {
...config.query,
sign: md5Func(config.query || {})
}
}
if (config.method.toLocaleUpperCase() === 'POST') {
config.body = {
...config.body,
sign: md5Func(config.body || {})
}
}
},
error => {
return Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
if (data.code !== 200) {
return Promise.reject(newError(data.message || 'Error'))
} else {
return data
}
},
error => {
return Promise.reject(error)
})
export default http
原理:前后端维护同一个密钥,将参数加密为sign参数,后端用同样的方法加密,比对前端的sign参数是否一致,一致则校验通过,不一致则校验不通过。
后端加密逻辑,以PHP举例
php
function verify($data=[]) {
// 密钥
$secretKey='abc123'
ksort($data);
$sign = '';
foreach($data as $key => $value) {
if ($key != 'sign') {
$sign .= $value;
}
}
$sign .= $secretKey
$sign = md5($sign)
// 比较前端传过来的签名与后端计算的签名是否一致
if ($sign == $data['sign']) {
return true;
} else {
return false;
}
}