后端egg和前端vue分离开发接口验签

在做前后台分离开发管理系统的时候，碰到了接口加密的问题，接口加密什么鬼？大概网上看了一下验签，md5加密，慢慢有思路了。

前端

• 前后台协商接口提供出appid（用户标识）和appsecret（应用秘钥）
• 前端根据appid和appsecret以及请求参数，按照一定算法生成签名sign
• 接口提供方验证签名

生成签名的步骤如下

1. 将所有业务请求参数按字母先后顺序排序
2. 参数名称和参数值链接成一个字符串A
3. 在字符串A的首尾加上appsecret组成一个新字符串B
4. 对字符串进行md5得到签名sign

假设请求的参数为：f=1,b=23,k=33，排序后为b=23,f=1,k=33，参数名和参数值链接后为b23f1k33，首尾加上appsecret后md5：
md5(secretkey1value1key2value2…secret)。

具体使用方式

export const appid = '39387298290402342341' // 标识用户
export const appsecret =  '$aJ3*&'   // 用来使用此约定加密规则，提高安全性

import {appid, appsecret} from '../../assets/js/encrypt'  

let time = new Date().getTime()  // 获取当前时间戳，后端用来限制请求次数
// 通过自定义规则结合秘钥加密处理
const sign = md5(appsecret+'FertSiteID24PageIndex1PageSize2'+appsecret)

// get方法
this.$http.get('/api/Check.ashx', {
    params: {
        FertSiteID: 24,
        PageIndex: 1,
        PageSize: 2,
        sign, // 将签名传递到后台
        time // 将时间戳传到后台
    }
}).then((res) => {
    console.log(res.data)
}).catch((e) => {
    console.log('请求失败'+e) 
})
还可以提前约定的appid用户标识传到后台
// http://localhost:8081/api/Check.ashx?FertSiteID=24&PageIndex=1&PageSize=2&sign=c846b7dccecb5dd8a080ea54a0bdae2c&time=1548815454871

后端

后端通过传递过来的参数根据之前约定的appid,appsecret和签名的自定义算法进行相应的判断，如果一致，则返回成功，否则失败

问题的重点：安全性的思考

• appid,appsecret和签名的自定义算法如何不被泄露，是此操作的重点。
• 其中核心的东西是appsecret应用秘钥，只要这个不泄露，知道其他的都无防
• 以上东西放到服务器上别人肯定是看不到的
• 但是重点是在前端，我们知道前端的东西都是不安全的，万一appsecret泄露了怎么办？
• 因为此项目是egg结合vue开发的前后端分离项目，egg只负责提供接口，此接口所有人都可以访问，前端vue项目独立。
• 前端项目是vue+webpack开发的项目，所有之后发布肯定是发布打包之后dist目录下的文件，但是发布之后在浏览器端会看到webpack里面vue的所有源文件，解决办法：去src/config/index.js中改一个参数：productionSourceMap:false 把这个改为false。然后重新打包发布
• map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
• 所以有了这样的操作前端就不需要担心泄露应用秘钥问题
• 还有webpack也可以加密相关的文件，可以多多了解