如何在MySQL+Node.js+React架构下将上传图片关联用户实现仅本人可见

1. MySQL 表结构调整 #

首先给存储图片信息的表新增用户关联字段，和用户表做外键关联：

-- 假设用户表名为users，主键为id，图片表名为images
ALTER TABLE images 
ADD COLUMN user_id INT NOT NULL,
ADD FOREIGN KEY (user_id) REFERENCES users(id),
ADD INDEX idx_user_id(user_id);

如果是新建图片表，直接把user_id字段写入表结构即可。

2. NodeJS 后端改造 #

• 先统一封装登录校验中间件：不管你用的是JWT还是Session实现登录，都把校验逻辑抽成中间件，解析请求里的登录凭证，拿到可信的当前用户id，挂载到req.user.id上，校验失败直接返回401未授权，拦截后续逻辑。

  注意：绝对不能信任前端传递的用户id参数，所有用户身份信息只能从登录凭证解析获得，避免伪造请求篡改关联关系。

• 上传图片接口改造：存储图片URL、名称到数据库时，同步把req.user.id作为user_id字段的值写入，完成图片和上传用户的绑定。
• 图片查询接口改造：所有查询图片的接口，SQL语句必须加WHERE user_id = ?的过滤条件，参数传入req.user.id，仅返回当前登录用户上传的图片数据。
• 可选优化：如果图片存储在自有服务器，新增图片资源访问鉴权逻辑，用户请求图片时先校验当前登录用户是否为图片所属用户，校验通过再返回资源，避免用户拼接URL访问他人图片；如果用云OSS存储，可生成有时效性的签名URL返回给前端，降低泄露风险。

3. React 前端适配 #

• 所有需要鉴权的请求（上传图片、查询图片列表等），请求头统一携带登录时获取的凭证，比如JWT的话格式为：headers: {Authorization: 'Bearer ' + localStorage.getItem('login_token')}
• 全局捕获接口返回的401状态码，触发时清除本地存储的登录信息，跳转到登录页面。
• 前端仅做页面展示和交互逻辑，所有权限校验不要放在前端实现，避免篡改绕过。

内容的提问来源于stack exchange，提问作者Tamil Bloggers