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:
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);
});
}
To send a GET request with a Bearer Token authorization header, you need to make an HTTP GET request and provide your Bearer Token with the Authorization: Bearer {token} HTTP header.
It is a simple authentication scheme built into the HTTP protocol. The client sends HTTP requests with the Authorization header that contains the word Basic, followed by a space and a base64-encoded(non-encrypted) string username: password. For example, to authorize as username / Pa$$w0rd the client would send.
The HTTP Authorization request header can be used to provide credentials that authenticate a user agent with a server, allowing access to a protected resource. The Authorization header is usually, but not always, sent after the user agent first attempts to request a protected resource without credentials.
The token is a text string, included in the request header. In the request Authorization tab, select Bearer Token from the Type dropdown list. In the Token field, enter your API key value. For added security, store it in a variable and reference the variable by name.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With