Question

我是Angular的新手，并且继承了旧版本，所以请多多包涵。

我的Angular 1.5.7应用程序需要从我的API服务器上获取文件，该文件受Bearer Token Authentication https://somedomain.com/api/doc/somefile.pdf保护。所以我需要这样设置标题：Authorization: Bearer xxxxxxxxxxxx。

我尝试使用Postman请求文件并设置标头Authorization: Bearer xxxxxxxxxxxx，并且可行。

在Angular 1.5.7中，我在view.html中有一个像这样的链接<a href="{{url}}" ng-show="url" target="_blank"> PDF</a>，其中{{url}} = https://somedomain.com/api/doc/somefile.pdf。

问题是我不知道如何在链接中添加标题。我认为这是不可能的。我必须创建一个像这样的链接：<a>PDF</a>，然后单击Angular接管，打开一个新窗口，然后在此处加载文件。

我研究了可能解决我问题的这些Stack溢出问题，但老实说，我不知道如何实现解决方案：

更新

我的解决方案是使用以下代码进行指令。之所以起作用，是因为单击链接时 current 窗口已经设置了授权标头，因此可以访问该文件。

<a href="https://somedomain.com/api/doc/somefile.pdf" ng-click="openPdf($event)">PDF</a>

function openPdf($event) {
    // Prevent default behavior when clicking a link
    $event.preventDefault();

    // Get filename from href
    var filename = $event.target.href;

    $http.get(filename, {responseType: 'arraybuffer'})
    .success(function (data) {
        var file = new Blob([data], {type: 'application/pdf'});
        var fileURL = URL.createObjectURL(file);

        // Open new windows and show PDF
        window.open(fileURL);
    });
}

Answer 1

您不能使用拦截器。单击的链接将由浏览器请求处理，而不是系统处理。您需要将click事件处理程序（带有event.preventDefault（）方法）附加到此链接，并使用您自己的函数发送get请求。它将为请求添加标题

Answer 2

您可以尝试使用interceptors。基本上，您将能够检查每个HTTP调用，并将Authorization标头附加到所需的标头。

Here是带有授权标头的特定用法的链接，而this则通常解释了拦截器。

Answer 3

我的解决方案涉及在页面加载时运行AngularJS脚本，而不是等待用户单击。在这种情况下，您可以使用$http.get(URL, options)调用并像这样传递您的Authorization标头：

<script>
  var app = angular.module('myApp', []);
  var config = {headers:  {'Authorization': 'Bearer <access_token>'} };"
  app.controller('myCtrl', function($scope, $http)
    { $scope.boxRootFolder = 'loading';
      $http.get('https://api.box.com/2.0/folders/0/items', config)
      .then( function(response)
        { $scope.boxRootFolder = response.data;
        } );
    } );
</script>

将授权标头添加到单击的链接

3 个答案: