javascript - 您如何使用 Angular 处理需要授权 token 的下载链接？

Question

我有一个与 Angular 一起使用的 REST API。目前我有带有文件附件的帖子对象。要下载每个文件附件，必须调用/get/file/{id}，但每次都需要授权 token 以表明用户已登录并拥有适当的权限。

经过大量搜索，我最终使用 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> 这样的 anchor 链接。 ，这真的是下载文件的黑客攻击，导致浏览器支持不佳。 Safari 和移动 iOS 目前无法使用此解决方案(Safari 使用 blob 在新窗口中打开文件:http://siteaddress.com，而移动 Safari 甚至不加载该文件)。

此外，浏览器不支持进度指示。这意味着在 API 返回整个下载文件之前，单击下载实际上不会执行任何操作，然后文件将显示在浏览器下载部分中。这导致等待时间没有任何迹象表明发生了什么。

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

Answer 1

您可以使用 Angular 的 $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 }
})