添加授权 header 以点击 link

Question

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

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

我尝试使用 Postman 请求文件并设置 header Authorization: Bearer xxxxxxxxxxxx 并且有效。

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

问题是我不知道如何将 header 添加到 link。我认为这是不可能的。我必须像这样制作一个 link：<a>PDF</a> 并在单击时 Angular 接管，打开一个新的 window 并在那里加载文件。

我查看了这些可能会解决我的问题的 Stack overflow 问题，但老实说我不知道如何实施解决方案：

更新

我的解决方案是使用以下代码创建一个指令。它之所以有效，是因为当单击 link 时，current window 已经设置了授权 header，因此授予了对文件的访问权限。

<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

您可以尝试使用interceptors。基本上，您将能够检查每个 HTTP 调用并将 Authorization header 附加到您想要的那些。

Here is a link for the specific usage with Authorization header and this 一个是对拦截器的一般性解释。

Answer 2

您不能使用拦截器。单击 link 将由浏览器请求处理，而不是系统。您需要将点击事件处理程序（使用 event.preventDefault() 方法）附加到此 link 并使用您自己的函数发送获取请求。这会将 headers 添加到请求

Answer 3

我的解决方案涉及在页面加载时运行 AngularJS 脚本，而不是等待用户点击。在这种情况下，您可以使用 $http.get(URL, options) 调用并传入您的授权 header，如下所示：

<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>

添加授权 header 以点击 link

Add authorization header to clicked link

angularjs

bearer-token