接口保护，element-ui+axios使用加密，后端php-laravel解密

云上全栈工程师

已于 2022-05-13 14:57:07 修改

阅读量1.1k

点赞数

文章标签： php ui laravel

于 2022-05-12 17:17:57 首次发布

本文链接：https://blog.csdn.net/weixin_42021688/article/details/124735581

版权

对接口进行保护，前端element-ui+axios使用加密，后端php解密
加密地址:https://www.npmjs.com/package/crypto-js

前端 element-ui+axios
npm引入加密插件

npm install crypto-js

公共文件main.js

import Cookies from 'js-cookie'
Vue.use(ElementUI)
Vue.use(VueAxios, axios)
Vue.axios.defaults.headers = {
	'authorization': encrypt('加保密参数|' + ((Date.parse(new Date()) / 1000)+43200)) //加密+时间
}

/**
 * 1加密：
 * @param  data {加密的数据}
 * @param  key {加密的key 16位}
 * // 原文链接：https://blog.csdn.net/weixin_46105038/article/details/107481590			
 */
function encrypt(data) {
	return CryptoJS.AES.encrypt(
		data,
		CryptoJS.enc.Utf8.parse('dsdad@.live-sfds'), {
			mode: CryptoJS.mode.ECB,
			padding: CryptoJS.pad.Pkcs7
		}).toString();
}
// 2.解密：
/**
 * @param  data {解密的数据}
 * @param  key {解密的key 16位}
 * // 原文链接：https://blog.csdn.net/weixin_46105038/article/details/107481590
 */
function decrypt(data) {
	return CryptoJS.AES.decrypt(
		data,
		CryptoJS.enc.Utf8.parse('dsdad@.live-sfds'), {
			mode: CryptoJS.mode.ECB,
			padding: CryptoJS.pad.Pkcs7
		}).toString(CryptoJS.enc.Utf8);
}

php-laravel后端解密

  /**
     * 验证接口是否带有authorization验证
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
      // 解密  
      /**
      * @param string 参数
      * @param string $method 解密的方法
      * @param string $key 解密密钥 16位
      * @param int $options 解密的数据格式
      * @param string $iv 解密的偏移量 16位
      * 原文链接：https://blog.csdn.net/weixin_46105038/article/details/107481590
      */
      $authorization = $request->header('authorization');
      $auth=openssl_decrypt($authorization,'aes-128-ecb','yunxc@.live-sfds',0,''); //解密
      if ($auth) {
        $data=explode('|',$auth);
        if ($data[0]!='加保密参数') { //判断是否指定的
           return response()->json([
                'status' => 'fail',
                'info' => 'Unauthorized'
            ], 401);
        }
        if ($data[1]<time()) { //判断是否过期
           return response()->json([
                'status' => 'fail',
                'info' => 'Unauthorized'
            ], 401);
        }
      }
      return $next($request);
    }

uniapp 封装

// 公共的请求 设置header头
import CryptoJS from 'crypto-js' //加密
const request = function(options) {
	if(options.method=="POST"){
		options.header = {
			'content-type': 'application/x-www-form-urlencoded',
			'authorization': encrypt('加保密参数|' + ((Date.parse(new Date()) / 1000) + 43200)) //加密+时间
		};
	}else{
		options.header = {
			'authorization': encrypt('加保密参数|' + ((Date.parse(new Date()) / 1000) + 43200)) //加密+时间
		};
	}
	
	console.log(3333,options)
	return uni.request(options);
}
Vue.prototype.$request = request

/**
 * 1加密：
 * @param  data {加密的数据}
 * @param  key {加密的key 16位}
 * // 原文链接：https://blog.csdn.net/weixin_46105038/article/details/107481590			
 */
function encrypt(data) {
	return CryptoJS.AES.encrypt(
		data,
		CryptoJS.enc.Utf8.parse('dsdad@.live-sfds'), {
			mode: CryptoJS.mode.ECB,
			padding: CryptoJS.pad.Pkcs7
		}).toString();
}

html

#npm下载的包直接使用
<script type="text/javascript" src="/crypto-js/crypto-js.js"></script>
<script>
    function encrypt(data) {
        return CryptoJS.AES.encrypt(
            data,
            CryptoJS.enc.Utf8.parse('yunxc@.live-sfds'), {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
            }).toString();
    }
    var lsrt=encrypt('加保密参数|' + ((Date.parse(new Date()) / 1000) + 43200))
</script>