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

问题描述

我正在用 Angular 编写一个 web 应用程序，其中身份验证由 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 调用非常有效，但我不明白我应该如何处理托管在后端的文件的下载链接(这些文件驻留在托管 Web 服务的同一台服务器上).

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获取数据并保存文件客户端.

以上都不尽如人意.

1 是我现在使用的解决方案.我不喜欢它有两个原因:首先它在安全方面不是理想的，其次它可以工作但它需要大量的工作，尤其是在服务器上:下载一些东西我需要调用一个服务来生成一个新的随机" url，将其存储在某处(可能在 DB 上)一段时间，然后将其返回给客户端.客户端获取 url，并使用 window.open 或类似的.当请求时，新的 url 应该检查它是否仍然有效，然后返回数据.

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

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

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