阿里云OSS下载链接文件名

1.背景介绍

下载的资源是阿里云对象存储，后台将资源链接签名后返回给前端,类似下面的链接（隐去了域名，并且有有效时间，不可访问）

http://xxxxxx/book%2Foffline%2Fzip%2F2%2FISBN9787550245174_%E4%B8%80%E8%B5%B7%E6%9D%A5%E4%BC%A0%E8%AF%9D.zip?Expires=1565867136&OSSAccessKeyId=LTAIj9HegdJpycfI&Signature=9%2BmWUxAaGUZDq3CzMcsFcV4V7nQ%3D

理论上前端只需要将其包裹在标签内部即可

但实践后发现默认下载的文件名包含阿里云OSS的虚拟路径，如果需求对这个名字不敏感，这个问题可以忽略，但公司要求不能包含虚拟路径

下载.png

2.问题原因

下载时，部分下载文件路劲被转码，转码前浏览器找到最后一个/并认为之后的所有字符串（截止到参数?）是文件名即book%2Foffline%2Fzip%2F2%2FISBN9787550245174_%E4%B8%80%E8%B5%B7%E6%9D%A5%E4%BC%A0%E8%AF%9D.zip,转码后book/offline/zip/2/ISBN9787550245174_一起来传话.zip
所以首先想到，在前端将URL转码，使用decodeURIComponent(注意与decodeURI的区别)
实践后，点击测试，貌似解决了问题，但测试小姐姐说，随机会出现下载签名失效的问题，起初怀疑后台签名出问题，但给出的回复是这是批量签名，不会某一个失败，所以还是要找原因

错误.png

观察截图的签名，中间出现了空格，实际上这是不可能的，所以确定是转码弄出的问题
现在问题就是，资源路径需要解码，而签名信息需要编码
所以最终解决办法是在前端将前部分资源路径解码，而保持后部分签名信息不变

http://xxxxxx/book/offline/zip/2/ISBN9787550245174_一起来传话.zip?Expires=1565867136&OSSAccessKeyId=LTAIj9HegdJpycfI&Signature=9%2BmWUxAaGUZDq3CzMcsFcV4V7nQ%3D

代码如下（全局filter）

const ossurl=function(url){
    let index = url.indexOf("?")
    if (index != -1) {
        let sig = url.slice(index)
        let urlexp = decodeURIComponent(url.slice(0, index))
        return `${urlexp}${sig}`
    }
    return url
}

不知道这样处理是不是最佳实践，或者是其他错误导致现在的结果，希望有了解的朋友帮忙指出