React+Django Rest Framework帖子所有者条件渲染及权限、JWT存储问题

编辑按钮渲染方案 #

你当前使用的if (user.id === post.owner)判断逻辑是前端侧的标准实现，但是要注意：

• 前端判断仅做体验优化，作用是避免给非所有者展示不需要的操作按钮，不能作为权限校验的核心逻辑
• 完整的最优实现需要前后端双重校验：后端的编辑提交接口必须额外校验请求用户身份与帖子所有者是否匹配，不匹配直接返回403权限不足，防止前端代码被篡改后非法提交编辑请求

编辑页面非法访问拦截 #

可以在前端路由层用if (user.id === post.owner)做前置判断，不匹配直接重定向到帖子详情页或403页，但是同样需要后端兜底：

• 前端路由守卫：进入编辑页前先拉取帖子所有者信息和当前登录用户id对比，不匹配就执行重定向，避免用户看到无权限的编辑页面
• 后端兜底：编辑页依赖的帖子详情查询接口、编辑提交接口都要做权限校验，非所有者请求直接返回403，前端统一监听403状态码做全局重定向，哪怕前端路由判断被绕过，用户也拿不到编辑数据，无法完成操作

JWT避免前端暴露的方案 #

localStorage属于JS可读写的存储，天然存在被XSS窃取、直接在开发者面板查看的问题，优化方案优先级如下：

1. 优先使用带HttpOnly、Secure、SameSite属性的Cookie存储JWT：HttpOnly属性会禁止JS读取该Cookie，既不会被XSS脚本窃取，也不会在Application面板被直接读取到明文令牌；Secure保证仅在HTTPS环境下传输Cookie；SameSite可以降低CSRF攻击风险
2. 若必须使用前端存储，可以将JWT拆分为多个片段，分别存储在localStorage、sessionStorage、JS内存中，使用时再拼接，该方案仅提升窃取门槛，无法完全避免泄露，不推荐作为首选方案
3. 额外优化：后端设置较短的JWT过期时间，敏感操作增加二次校验逻辑，降低令牌泄露后的风险

内容的提问来源于stack exchange，提问作者some nooby questions