web-dev-qa-db-ja.com

クリックしたリンクに認証ヘッダーを追加する

私はAngularに不慣れで、古いバージョンを継承しているため、我慢してください。

私のAngular 1.5.7アプリケーションは、ベアラートークン認証によって保護されているAPIサーバーからファイルを取得する必要があります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が引き継ぎます）、新しいウィンドウを開いてファイルをロードします。

私は自分の問題を解決する可能性があるこれらのスタックオーバーフローの質問を見てきましたが、正直なところ、ソリューションを実装する方法がわかりません。

[〜＃〜]更新[〜＃〜]

私の解決策は、以下のコードでディレクティブを作成することでした。これは、リンクをクリックしたときに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);
    });
}
angularjsbearer-token
8
Cudos

インターセプターは使用できません。クリックされたリンクは、システムではなくブラウザのリクエストによって処理されます。このリンクにクリックイベントハンドラー（event.preventDefault（）メソッドを使用）をアタッチし、独自の関数を使用してgetリクエストを送信する必要があります。リクエストにヘッダーを追加します

1
Timothy

interceptorsを使用してみてください。基本的に、すべてのHTTP呼び出しを確認し、必要なものにAuthorizationヘッダーを追加できます。

ここ はAuthorizationヘッダーを使用した特定の使用法へのリンクであり、 this 1つは一般的にインターセプターを説明しています。

0
eminlala