MERN应用如何安全限制后端静态文件的访问权限？

核心思路 #

把文件从Express的静态文件夹移到非公开目录（比如项目根目录下的private-storage），通过专门的API接口校验用户身份与文件所有权后，再返回文件内容。前端仅通过该API获取文件并转为Blob展示，完全屏蔽直接访问文件路径的可能。

具体实现步骤 #

1. 调整文件存储位置 #

• 新建非公开存储目录，比如./private-storage，确保该目录不在Express的express.static()挂载路径范围内。
• 上传文件时，将文件保存到该目录下的用户专属子文件夹（如./private-storage/{userId}/images/{imageId}），保留用户隔离结构但不对外暴露。

2. 创建带权限校验的文件获取API #

在Express后端添加路由，先验证用户身份，再校验文件所有权，最后返回文件内容：

const express = require('express');
const router = express.Router();
const fs = require('fs');
const path = require('path');
const jwt = require('jsonwebtoken');

// JWT身份验证中间件
const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (!token) return res.sendStatus(401);
  
  jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
};

// 文件获取接口
router.get('/user-files/:userId/images/:imageId', authenticateToken, (req, res) => {
  const { userId, imageId } = req.params;
  
  // 校验当前用户是否为文件所有者
  if (req.user.id !== userId) {
    return res.sendStatus(403);
  }
  
  // 构建文件路径
  const filePath = path.join(__dirname, '../private-storage', userId, 'images', imageId);
  
  // 检查文件是否存在
  fs.access(filePath, fs.constants.F_OK, (err) => {
    if (err) return res.sendStatus(404);
    
    // 设置对应Content-Type
    const ext = path.extname(imageId).toLowerCase();
    let contentType = 'application/octet-stream';
    if (ext.match(/\.jpe?g/)) contentType = 'image/jpeg';
    if (ext === '.png') contentType = 'image/png';
    if (ext === '.gif') contentType = 'image/gif';
    
    // 流式返回文件内容
    res.setHeader('Content-Type', contentType);
    fs.createReadStream(filePath).pipe(res);
  });
});

module.exports = router;

3. 前端调整文件获取逻辑 #

前端不再直接请求文件URL，而是调用上述API接口，获取后转为Blob展示：

// 获取用户图片的函数
const fetchUserImage = async (userId, imageId) => {
  try {
    const token = localStorage.getItem('authToken');
    const response = await fetch(`/api/user-files/${userId}/images/${imageId}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    
    if (!response.ok) throw new Error('无权限访问或文件不存在');
    
    const blob = await response.blob();
    return URL.createObjectURL(blob);
  } catch (err) {
    console.error(err);
    return '/path/to/default-image.png';
  }
};

// 示例：渲染图片
const loadImage = async () => {
  const imageUrl = await fetchUserImage('user123', 'photo456.png');
  document.getElementById('user-avatar').src = imageUrl;
};

4. 禁用原静态文件夹的文件访问 #

移除或调整原有的静态文件挂载配置，仅保留前端打包后的静态资源（如React的build文件夹）：

// 仅挂载前端构建产物，不暴露私有文件目录
app.use(express.static(path.join(__dirname, '../client/build')));
// 移除之前挂载的文件存储静态目录：app.use(express.static('./public/files'));

额外优化点 #

• 缓存控制：在API响应中添加Cache-Control头，避免重复请求相同文件，文件更新时可通过修改文件名或添加版本参数失效缓存。
• 大文件处理：始终使用流式传输（createReadStream），避免读取大文件占用过多内存。
• 上传校验：文件上传接口同样添加身份验证，确保用户只能上传到自己的专属目录。

内容的提问来源于stack exchange，提问作者Joe Dow