前后端分离，请求加密思路

1.声明，Access-Control-Allow-Origin 可以指定某个地址访问，可以保证安全

2.多个地址想要访问一个后台地址，似乎有点难，尝试了写正则，不过不太好

3.用的koa2写的后台， vue3前台，本来想着 用crytojs来加密解密，但是感觉有点太杀鸡用牛刀的感觉，个人不喜欢 import各种包，能自己实现的就尽可能自己实现

4.直到我发现了window.btoa，一番折腾，找到了还算可行的加密方法

下面贴给大家

前端代码，写在axios里面的，

主要是添加了一个自定义Header，添加了生成加密字符串的方法

const instance = axios.create({
    baseURL: config.baseUrl,
    timeout: 3000,
    headers: {
        'Xpofz': genPassword()
    }
})

function genPassword() {
    const time = new Date().getTime().toString()
    const list = ["s5lp", 
"pOt#", "#239", "9_*1",
 "1?/n", "nz9I", "IioV", 
"V8zo", "oys6", "67ss"]
    let res = ''
    time.split('').forEach(item => {
        res += list[item * 1]
    })
    const header = Math.random().toString(16).substring(3, 12).toUpperCase()
    return header + window.btoa(res + "+++78S5dz")
}

1.为了保证不能被直接解base64，加了3的倍数（9）长度的前缀（偷看了base64解密过程）

        即使知道是用base64加密的，而且知道除去前9位（不一定是9,3的倍数都行），解出来时这样的： 不知道密码数组一样不行

"pOt#IioV1?/n9_*1V8zo67sss5lppOt#9_*1s5lpnz9I9_*1#239+++78S5dz"

2.加入了尾缀，可用作后端解密条件之一

3.总之 就是加密当前时间戳，然后用密码数组加密，后端用同样的密码数组还原

function decodeBase64(r) {
    var o = String(r).replace(/=+$/, "");
    if (o.length % 4 === 1)throw new Error("'atob' failed: The string to be decoded is not correctly encoded.");
    for (var n, a, i = 0, c = 0, d = ""; a = o.charAt(c++); ~a && (n = i % 4 ? 64 * n + a : a, i++ % 4) ? d += String.fromCharCode(255 & n >> (-2 * i & 6)) : 0)a = e.indexOf(a);
    return d
}


// koa2 中间件内部

 let { xpofz } = ctx.request.headers
    if(!xpofz) {
        ctx.throw(404, "Not found")
        return
    }
    xpofz = xpofz.substr(9)
    const o = decodeBase64(xpofz).split("+++")[0]
    const list = ["s5lp", "pOt#", "#239", "9_*1", "1?/n", "nz9I", "IioV", "V8zo", "oys6", "67ss"]
    let l = ''
    for(let i=0; i < o.length; i+=4) {
        const index = list.indexOf(o.substr(i, 4))
        if(index === -1 ) {
            ctx.throw(401, "Authorization failed")
            return
        }
        l += list.indexOf(o.substr(i, 4))
    }
    const timeDelta = new Date().getTime() - Number(l)
    if(timeDelta > 1000 * 30) {
        ctx.throw(408, "30s timeout")
    } else {
        await next()
    }

1.此header头必须存在才能访问

2.此header头必须通过合适的加密方式才能被后台解密成功

3.此header头不能重复使用

4.多重加密 保证安全

可以作为简单的加解密方式的参考