项目中下载加权，你是怎么做的，欢迎评论。

项目中我们遇到过这种需求：

　　下载我们可以直接<a download></a> 方式直接下载，那么问题来了，我们直接 href 赋值后台返回的 src 路径，我们的文件可以被下载下来，但是现在我记录了你的静态路径，但是后台又没有及时的清理 vas 存储的文件，那么记录之后我们直接地址栏拼接方式是不是也可直接下载，即使你么有登录情况下。

　　这个问题听起来还是蛮简单的，但是处理上我们前后台都要处理，后台需要定时的处理文件，前端要做的是给文件添加登录权限，那么我们想到了 token 登录令牌。

下载的三种方式：

1、直接使用get请求方式进行下载：

1     const a = document.createElement('a');
2     a.download = `文件名称.zip`;
3     filename="20181211191944.zip"",
4     a.href = e.target.result;
5     document.body.appendChild(a);
6     a.click();

2、使用form 表单post请求进行下载：

 1 const postDownloadFile = (action, param) => {
 2     const form = document.createElement('form');
 3     form.action = action;
 4     form.method = 'post';
 5     form.target = 'blank';
 6     Object.keys(param).forEach((item) => {
 7         const input = document.createElement('input');
 8         input.type = 'hidden';
 9         input.name = item;
10         input.value = param[item];
11         form.appendChild(input);
12     });
13     document.body.appendChild(form);
14     form.submit();
15     document.body.removeChild(form);
16 }
17 
18 postDownloadFile(url, param);

3、axios（ajax）前端根据返回数据流生成文件下载：

 1 axios.post(url, param, {
 2   responseType: 'blob'
 3 }).then((res) => {
 4   console.log('res', res);
 5   const blob = res.data;
 6   const reader = new FileReader();
 7   reader.readAsDataURL(blob);
 8   reader.onload = (e) => {
 9     const a = document.createElement('a');
10     a.download = `文件名称.zip`;
11     // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name="attachment"; filename="20181211191944.zip"",
12     a.href = e.target.result;
13     document.body.appendChild(a);
14     a.click();
15     document.body.removeChild(a);
16   };
17 }).catch((err) => {
18   console.log(err.message);
19 });

这是我们常用的三种下载方式，以及我们的下载处理。

那么我们给下载加上权限一步步来：

　　1、文件的下载方式不能向这样的方式下载了，需要我们请求接口方式下载文件。

　　2、nginx 需要配置文件的下载路径的 token 权限，去redis当中取登录状态，假如查到了那么默认你是可以下载的。

 1 const getDownFIle = (href, _name, type) => {
 2 if(!href || !_name) return;
 3 !!type?console.log('当前文件路径'， href):null   
 4 let xhr = new XMLHttpRequest();
 5 　　xhr.open("get", href);
 6    xhr.setRequestHeader("accessToken", "登录之后存入token的前端缓存中取")；
 7    xhr.setRequesHeader("Accepet", "*/*");
 8    xhr.responeseType = "blob";
 9    xhr.onload = function() {
10        if(this.status != 200) return;   
11        let blob = this.response;
12        // 进行文件的生成
13        let a = document.createElement('a');
14        let url = window.URL ? window.URL.createObjectURL(blob):window.webkitURL.createObjectURL(blob);
15        a.href = url;
16        a.down = `file.${_name}`;
17        document.body.appendChild(a);
18 　　　　 a.click();
19   　　  window.URL.revokeObject.URL(url); // 清除URL 
20 
21    }          
22 }

　　此时前端做的就是这些，这些东西我们可以给接口 get 添加 token 假如我们没有登录时，页面是没有办法直接下载文件的。希望对你的工程有帮助，希望您的点赞，以及评论。。。