Question

我有一个REST API，我和Angular一起使用。目前我发布了具有文件附件的对象。要下载每个文件附件，必须调用/ get / file / {id}，但每次传送用户登录并具有适当权限时都需要授权令牌。

经过大量搜索后，我最终使用Angular-File-Saver（使用FileSaver.js和Blob.js）进行了以下设置：

feed.html

<p class="post-attachments text-right" ng-repeat="file in post.files">
 <button type="button" class="btn-link" ng-click="feed.getFile(file)">{{file.name}}</button>                        
</p>

feed.controller.js

function getFile(file) {
    var file_id = file.id;

PostService.GetFile(file_id).then(function(response) {
    var file_type = response.headers('Content-Type');
    var data = new Blob([response.data], {type: file_type});

    FileSaver.saveAs(data, file.name);
}, function error(response) {
    console.log(response);
});

}

虽然这种方式有效，但存在一些大问题。因为这与仅使用像<a href="link.com/assets/stockphoto.jpeg" download></a>这样的锚链接不同，所以它在下载文件方面确实很糟糕，导致浏览器支持不佳。 Safari和移动iOS目前不支持此解决方案（Safari使用blob在新窗口中打开文件：http://siteaddress.com，移动版Safari甚至无法加载文件。

此外，没有浏览器支持进度指示。这意味着点击下载实际上并没有做任何事情，直到API返回整个下载，然后文件将显示在浏览器下载部分。这导致等待时间没有任何迹象表明发生了什么。

我想知道的是 - 除了每次调用/ get / file / {id}端点时都不需要授权令牌，还有更好的方法来处理这个问题吗？我在这里抨击我的头，因为这似乎是一个常见的问题，但很难找到答案。

Answer 1

您可以使用有角度的$http发出请求：

makeRequest = function(req){ 
  $http(req)
  .success(function(data, status){
     console.log(data)
  })
  .error(function(data, status){
     console.log(data)
  })
}

// Use it
makeRequest({
  method: 'POST',
  url: ('/get/file/' + id),
  headers: { authorization: token }
})

如何使用Angular处理需要授权令牌的下载链接？

1 个答案: