javascript - 如何使用基于 JWT 的身份验证处理文件下载？

Question

我正在用 Angular 编写一个网络应用程序，其中身份验证由 JWT token 处理，这意味着每个请求都有一个包含所有必要信息的“身份验证” header 。

这对于 REST 调用非常有效，但我不明白我应该如何处理后端托管文件的下载链接(这些文件位于托管 Web 服务的同一台服务器上)。

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

我想到的一些解决方案:

1. 在服务器上生成一个临时的不安全下载链接
2. 将认证信息作为url参数传递，手动处理
3. 通过XHR获取数据并在客户端保存文件。

以上所有都不尽如人意。

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

2 看起来至少有同样多的工作。

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

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

我不一定要寻找“Angular 方式”的解决方案。普通的 Javascript 就可以了。

Answer 1

这是一种使用 the download attribute 在客户端上下载它的方法, the fetch API , 和 URL.createObjectURL .您将使用 JWT 获取文件，将有效负载转换为 blob，将 blob 放入 objectURL，将 anchor 标记的源设置为该 objectURL，然后在 javascript 中单击该 objectURL。

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 属性的值将是最终的文件名。如果需要，您可以从内容处置响应 header 中挖掘预期的文件名 as described in other answers .