Как вы обрабатываете ссылку для загрузки, требующую токена авторизации с помощью Angular?

Question

У меня есть REST API, который я использую рядом с Angular. В настоящее время у меня есть объекты post, у которых есть вложения файлов. Чтобы загрузить каждое вложение файла, необходимо вызвать вызов/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 } 
})