如何在带JWT认证的Express+MongoDB服务中实现浏览器流式下载

这个问题我之前帮不少开发者解决过——加了JWT认证后没法直接用浏览器URL触发原生流式下载，全量加载大文件又太磨人。给你两个靠谱的解决方案，既能过认证，又能找回原生下载的爽感：

方案一：用Axios流式响应实现渐进式下载 #

Axios其实支持流式响应，我们可以边接收数据边处理，不用等整个文件加载完再触发下载。不过浏览器环境下需要结合ReadableStream来对接Axios的流：

const yourJwtToken = '这里替换成实际的用户token';
const config = {
  responseType: 'stream', // 关键：把响应类型设为stream
  headers: { Authorization: `Bearer ${yourJwtToken}` }
};

axios.get(`http://${currentURL}/file-service/download`, config)
  .then(async (response) => {
    // 从响应头里提取文件名（后端要确保正确返回Content-Disposition）
    const contentDisposition = response.headers['content-disposition'];
    const filename = contentDisposition?.match(/filename="(.+)"/)[1] || 'default.zip';

    // 将Axios的流转换为浏览器可处理的ReadableStream
    const reader = response.data.getReader();
    const stream = new ReadableStream({
      async start(controller) {
        while (true) {
          const { done, value } = await reader.read();
          if (done) {
            controller.close();
            break;
          }
          controller.enqueue(value);
        }
      }
    });

    // 把流转成Blob并触发下载
    const blob = await new Response(stream).blob();
    const link = document.createElement('a');
    const blobUrl = window.URL.createObjectURL(blob);
    
    link.href = blobUrl;
    link.download = filename;
    link.click();
    
    // 下载完成后释放内存
    setTimeout(() => window.URL.revokeObjectURL(blobUrl), 1000);
  })
  .catch(err => {
    console.error('下载出错:', err);
  });

这种方式能减少前端内存占用，但浏览器还是要等Blob构建完成才会弹出下载框，体验和原生直接下载还有点差距。如果想要完全一致的原生体验，推荐方案二。

方案二：生成限时临时下载URL（最优解） #

这个思路是：前端先带JWT请求后端生成一个限时有效的临时下载链接，然后用这个链接直接触发浏览器原生下载——既不用带token，又能享受浏览器自带的进度条和下载管理。

后端修改（新增两个路由） #

// 生成临时下载链接的路由（需要JWT认证）
router.get('/file-service/generate-download-url', auth, async (req, res) => {
  if (!req.user) {
    return res.status(401).send('Please authenticate');
  }
  try {
    // 实际业务中应该从请求参数获取文件ID，这里用你的测试ID
    const fileId = '5dc5f57a081263451cee80d4';
    // 生成一个带文件ID的限时token（比如5分钟有效）
    const downloadToken = jwt.sign(
      { fileId },
      process.env.JWT_SECRET, // 用你项目里的JWT密钥
      { expiresIn: '5m' }
    );
    // 构造临时下载URL
    const tempDownloadUrl = `${req.protocol}://${req.get('host')}/file-service/download-temp?token=${downloadToken}`;
    res.send({ tempDownloadUrl });
  } catch (e) {
    console.error(e);
    res.status(500).send('Failed to generate download URL');
  }
});

// 临时下载路由（不需要JWT，验证临时token即可）
router.get('/file-service/download-temp', async (req, res) => {
  const { token } = req.query;
  if (!token) {
    return res.status(401).send('Invalid download token');
  }
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    const gfs = Grid(conn.db);
    
    gfs.findOne({ _id: decoded.fileId }, (err, file) => {
      if (err) return res.status(500).send(err);
      if (!file) return res.status(404).send('File not found');
      
      // 设置响应头，让浏览器触发原生下载
      res.set('Content-Type', file.contentType);
      res.set('Content-Disposition', `attachment; filename="${file.filename}"`);
      
      // 流式返回文件内容
      const readStream = gfs.createReadStream({ _id: decoded.fileId });
      readStream.pipe(res);
    });
  } catch (e) {
    console.error(e);
    res.status(401).send('Expired or invalid download token');
  }
});

前端修改（先拿临时链接再下载） #

const yourJwtToken = '这里替换成实际的用户token';

axios.get(`http://${currentURL}/file-service/generate-download-url`, {
  headers: { Authorization: `Bearer ${yourJwtToken}` }
})
.then(response => {
  const tempUrl = response.data.tempDownloadUrl;
  // 创建a标签触发原生下载，或者用window.open（注意弹窗拦截）
  const link = document.createElement('a');
  link.href = tempUrl;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
})
.catch(err => {
  console.error('生成临时下载链接出错:', err);
});

这种方式完全复用浏览器原生下载能力，大文件能即时显示进度，体验和之前直接访问URL一模一样，而且临时链接有有效期，安全性也有保障，是大型文件下载的首选方案。

总结 #

• 方案一适合不想大改后端的场景，能实现流式处理但体验略逊；
• 方案二体验最优，安全性高，是推荐的生产环境方案。

内容的提问来源于stack exchange，提问作者kyle hoell