web-dev-qa-db-fra.com

Ajouter un en-tête d'autorisation au lien cliqué

Je suis nouveau à Angular et hérite d'une ancienne version alors soyez indulgent avec moi.

Mon Angular 1.5.7 doit obtenir des fichiers de mon serveur API protégés par l'authentification par jeton au porteur https://somedomain.com/api/doc/somefile.pdf. Je dois donc définir un en-tête comme celui-ci: Authorization: Bearer xxxxxxxxxxxx.

J'ai essayé de demander des fichiers avec Postman et de définir l'en-tête Authorization: Bearer xxxxxxxxxxxx et ça marche.

In Angular 1.5.7 J'ai dans un view.html un lien comme celui-ci <a href="{{url}}" ng-show="url" target="_blank"> PDF</a> où {{url}} = https://somedomain.com/api/doc/somefile.pdf.

Le problème est que je ne sais pas comment ajouter un en-tête au lien. Je pense que ce n'est pas possible. Je dois faire un lien comme celui-ci: <a>PDF</a> et lorsque vous cliquez dessus Angular prend le relais, ouvrez une nouvelle fenêtre et chargez-y le fichier.

J'ai examiné ces questions de débordement de pile qui pourraient résoudre mon problème, mais honnêtement, je ne sais pas comment implémenter les solutions:

[~ # ~] mise à jour [~ # ~]

Ma solution a été de faire une directive avec le code ci-dessous. Cela fonctionne car lorsque vous cliquez sur le lien, la fenêtre actuelle a déjà défini l'en-tête d'autorisation et donc l'accès au fichier est accordé.

<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);
    });
}
angularjsbearer-token
7
Cudos

Vous ne pouvez pas utiliser d'intercepteurs. Le lien cliqué sera traité par la demande du navigateur et non par le système. Vous devez attacher le gestionnaire d'événements click (avec la méthode event.preventDefault ()) à ce lien et envoyer une demande get avec votre propre fonction. Ce qui ajoutera des en-têtes à la demande

1
Timothy

Vous pouvez essayer d'utiliser interceptors. Fondamentalement, vous pourrez vérifier chaque appel HTTP et ajouter un en-tête d'autorisation à ceux que vous souhaitez.

Ici est un lien pour l'utilisation spécifique avec en-tête d'autorisation et this on explique les intercepteurs en général.

0
eminlala