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

社会主义新天地 提交于 2019-11-27 07:03:56

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

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

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


那么我们一步步来:

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

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

   const getDownFile = (href, _name, type) => {   if(!href || !_name) return;   !!type ? console.log("当前文件路径:", href):nu   let xhr = new XMLHttpRequest();

   xhr.open("get", href);
   xhr.setRequestHeader("accessToken", "登录之后存入token的前端缓存中取");
   xhr.setRequesHeader("Accepet", "*/*");
   xhr.responeseType = "blob";
   xhr.onload = function() {
       if(this.status != 200) return;   
       let blob = this.response;
       // 进行文件的生成
       let a = document.createElement('a');
       let url = window.URL ? window.URL.createObjectURL(blob):window.webkitURL.createObjectURL(blob);
       a.href = url;
       a.down = `file.${_name}`;       document.body.appendChild(a);     a.click();      window.URL.revokeObject.URL(url); // 清除URL 
   }          
}

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!