Add authorization header to clicked link

Question

I am new to Angular and inherit an old version so bear with me.

My Angular 1.5.7 application needs to get files from my API server that is protected by Bearer Token Authentication https://somedomain.com/api/doc/somefile.pdf. So I need to set a header like this: Authorization: Bearer xxxxxxxxxxxx.

I have tried to request files with Postman and setting the header Authorization: Bearer xxxxxxxxxxxx and that works.

In Angular 1.5.7 I have in a view.html a link like this <a href="{{url}}" ng-show="url" target="_blank"> PDF</a> where {{url}} = https://somedomain.com/api/doc/somefile.pdf.

The problem is that I don't know how to add a header to the link. I think it is not possible. I have to make a link like this: <a>PDF</a> and when clicked Angular takes over, open a new window and load the file there.

I have looked at these Stack overflow questions that might solve my problem, but honestly I don't know how to implement the solutions:

• Add HTTP Header in JavaScript to requests for images
• Set HTTP header for one request

UPDATE

My solution was to make a directive with the code below. It works because when clicking the link the current window already has set the authorization header and therefore access to the file is granted.

<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);
    });
}

Shalna

Out of curiosity, what does the API method look like? What response type are you returning, etc.? Thanks! – Nonstandard

Answer 1

You can't use interceptors. Clicked link will be processed by browser request, not the system. You need attach click event handler ( with event.preventDefault() method ) to this link and send get request with your own function. Which will add headers to the request

Tearing

Your answer put me on the right track and this helped me solve it: #21729951 – Shalna

No Problem also had to access private pdf file from NodeJS server recently. Spend a time to figure it out – Tearing

Answer 2

You can try to use interceptors. Basically, you would be able check every HTTP call and append Authorization header to the ones you want.

Here is a link for the specific usage with Authorization header and this one explains interceptors in general.

Law

Answer 3

My solution involves running an AngularJS script while the page is loading, instead of waiting for the user click. In this scenario, you can use the $http.get(URL, options) call and pass in your Authorization header like this:

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

Ambrosial