这是一种使用下载属性、获取 API和URL.createObjectURL在客户端上下载它的方法。您将使用 JWT 获取文件，将有效负载转换为 blob，将 blob 放入 objectURL，将锚标记的源设置为该 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属性的值将是最终的文件名。如果需要，您可以从内容处置响应标头中挖掘预期的文件名，如其他答案中所述。

技术

根据来自 Auth0 的 Matias Woloski 的建议，JWT 知名布道者，我通过生成带有Hawk的签名请求解决了这个问题。

引用沃洛斯基的话：

例如，您解决这个问题的方法是像 AWS 那样生成一个签名请求。

这里有一个用于激活链接的技术示例。

后端

我创建了一个 API 来签署我的下载 url：

要求：

POST /api/sign
Content-Type: application/json
Authorization: Bearer...
{"url": "https://path.to/protected.file"}

回复：

{"url": "https://path.to/protected.file?bewit=NTUzMDYzZTQ2NDYxNzQwMGFlMDMwMDAwXDE0NTU2MzU5OThcZDBIeEplRHJLVVFRWTY0OWFFZUVEaGpMOWJlVTk2czA0cmN6UU4zZndTOD1c"}

使用签名的 URL，我们可以获取文件

要求：

GET https://path.to/protected.file?bewit=NTUzMDYzZTQ2NDYxNzQwMGFlMDMwMDAwXDE0NTU2MzU5OThcZDBIeEplRHJLVVFRWTY0OWFFZUVEaGpMOWJlVTk2czA0cmN6UU4zZndTOD1c

回复：

Content-Type: multipart/mixed; charset="UTF-8"
Content-Disposition': attachment; filename=protected.file
{BLOB}

前端（由jojoyuji）

通过这种方式，您只需单击一次即可完成所有操作：

function clickedOnDownloadButton() {

  postToSignWithAuthorizationHeader({
    url: 'https://path.to/protected.file'
  }).then(function(signed) {
    window.location = signed.url;
  });

}

已经提到的现有“fetch/createObjectURL”和“download-token”方法的替代方法是针对新 window的标准表单 POST。浏览器读取服务器响应中的附件标头后，将关闭新选项卡并开始下载。同样的方法也恰好适用于在新选项卡中显示 PDF 等资源。

这可以更好地支持旧浏览器并避免必须管理新型令牌。这也将比 URL 上的基本身份验证具有更好的长期支持，因为浏览器正在删除对 url 上的用户名/密码的支持。

在客户端，target="_blank"即使在失败的情况下，我们也使用避免导航，这对于 SPA（单页应用程序）尤其重要。

主要的警告是服务器端JWT 验证必须从POST 数据而不是从 header 中获取令牌。如果您的框架使用 Authentication 标头自动管理对路由处理程序的访问，您可能需要将您的处理程序标记为未经身份验证/匿名，以便您可以手动验证 JWT 以确保正确授权。

表单可以动态创建并立即销毁，以便正确清理（注意：这可以在纯 JS 中完成，但为了清晰起见，此处使用 JQuery）-

function DownloadWithJwtViaFormPost(url, id, token) {
    var jwtInput = $('<input type="hidden" name="jwtToken">').val(token);
    var idInput = $('<input type="hidden" name="id">').val(id);
    $('<form method="post" target="_blank"></form>')
                .attr("action", url)
                .append(jwtInput)
                .append(idInput)
                .appendTo('body')
                .submit()
                .remove();
}

只需添加您需要作为隐藏输入提交的任何额外数据，并确保将它们附加到表单中。

我会生成令牌以供下载。

在 angular 中发出经过身份验证的请求以获取临时令牌（例如一个小时），然后将其作为 get 参数添加到 url 中。这样您就可以以您喜欢的任何方式下载文件（window.open ...）

詹姆斯回答的纯 JS 版本

function downloadFile (url, token) {
    let form = document.createElement('form')
    form.method = 'post'
    form.target = '_blank'
    form.action = url
    form.innerHTML = '<input type="hidden" name="jwtToken" value="' + token + '">'

    console.log('form:', form)

    document.body.appendChild(form)
    form.submit()
    document.body.removeChild(form)
}