如何使用基于JWT的身份验证处理文件下载？ [英] How to handle file downloads with JWT based authentication?

问题描述

我正在Angular中编写一个webapp，其中身份验证由JWT令牌处理，这意味着每个请求都有一个带有所有必要信息的身份验证标头。

I'm writing a webapp in Angular where authentication is handled by a JWT token, meaning that every request has an "Authentication" header with all the necessary information.

这适用于REST调用，但我不明白我应该如何处理后端托管的文件的下载链接（文件驻留在托管webservices的同一服务器上）。

This works nicely for REST calls, but I don't understand how I should handle download links for files hosted on the backend (the files reside on the same server where the webservices are hosted).

我不能使用常规< a href ='...'/> 链接，因为它们不会带任何标头和身份验证将失败。同样适用于 window.open（...）的各种咒语。

I can't use regular <a href='...'/> links since they won't carry any header and the authentication will fail. Same for the various incantations of window.open(...).

我想到的一些解决方案：

Some solutions I thought of:

1. 在服务器上生成临时的不安全下载链接


2. 将身份验证信息作为url参数传递，手动处理案例


3. 通过XHR获取数据并保存文件客户端。

以上所有都不太令人满意。

All of the above are less than satisfactory.

1是我现在使用的解决方案。我不喜欢它有两个原因：首先它不是理想的安全性，其次它可以工作，但它需要相当多的工作，特别是在服务器上：下载一些我需要调用一个生成一个新随机的服务url，将它存储在某个地方（可能在数据库上）一段时间，并将其返回给客户端。客户端获取URL，并使用window.open或类似的。当请求时，新网址应该检查它是否仍然有效，然后返回数据。

1 is the solution I am using right now. I don't like it for two reasons: first it is not ideal security-wise, second it works but it requires quite a lot of work especially on the server: to download something I need to call a service that generates a new "random" url, stores it somewhere (possibly on the DB) for a some time, and returns it to the client. The client gets the url, and use window.open or similar with it. When requested, the new url should check if it is still valid, and then return the data.

2似乎至少有同样的效果。

2 seems at least as much work.

3似乎做了很多工作，甚至使用了可用的库，以及许多潜在的问题。 （我需要提供自己的下载状态栏，将整个文件加载到内存中，然后让用户在本地保存文件）。

3 seems a lot of work, even using available libraries, and lot of potential issues. (I would need to provide my own download status bar, load the whole file in memory and then ask the user to save the file locally).

任务看起来很漂亮虽然基本的，所以我想知道是否有更简单的东西我可以使用。

The task seems a pretty basic one though, so I'm wondering if there is anything much simpler that I can use.

我不一定在寻找Angular方式的解决方案。常规Javascript没问题。

I'm not necessarily looking for a solution "the Angular way". Regular Javascript would be fine.

推荐答案

以下是使用下载属性，获取API 和 URL.createObjectURL 。您将使用JWT获取文件，将有效负载转换为blob，将blob放入objectURL，将锚标记的源设置为该objectURL，然后在javascript中单击该objectURL。

Here's a way to download it on the client using the download attribute, the fetch API, and URL.createObjectURL. You would fetch the file using your JWT, convert the payload into a blob, put the blob into an objectURL, set the source of an anchor tag to that objectURL, and click that objectURL in javascript.

let anchor = document.createElement("a");
document.body.appendChild(anchor);
let file = 'https://www.example.com/some-file.pdf';

let headers = new Headers();
headers.append('Authorization', 'Bearer MY-TOKEN');

fetch(file, { headers })
    .then(response => response.blob())
    .then(blobby => {
        let objectUrl = window.URL.createObjectURL(blobby);

        anchor.href = objectUrl;
        anchor.download = 'some-file.pdf';
        anchor.click();

        window.URL.revokeObjectURL(objectUrl);
    });

下载属性的值将是最终的文件名。如果需要，您可以从内容处置响应标题中挖掘出预期的文件名如其他答案所述。

The value of the download attribute will be the eventual file name. If desired, you can mine an intended filename out of the content disposition response header as described in other answers.

这篇关于如何使用基于JWT的身份验证处理文件下载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！