如何在React中实现RBAC并解决localStorage篡改角色越权问题

前端所有权限校验本质是体验优化，不能作为安全兜底手段，所有敏感权限判断必须在服务端完成是核心原则

1. 服务端核心防控（必须做） #

• 所有涉及敏感数据查询、数据修改的接口，必须在服务端校验当前登录用户的角色/权限，权限不足直接返回403拦截。就算前端篡改本地存储拿到了超管页面，发起的所有超管权限请求都会被服务端拒绝，不会造成实际数据风险。
• 不要给前端返回明文角色供本地存储，改为下发加密签名的身份凭证（比如JWT Token），将用户角色、权限列表放在JWT payload中，由服务端用私钥签名，前端无法篡改，篡改后服务端校验签名直接失败。

2. 前端层面优化（提升篡改门槛+体验） #

• 不要直接读取localStorage中的角色作为权限判断依据，每次页面刷新、路由跳转时主动调用/api/getCurrentUserInfo接口，用接口返回的真实角色/权限列表作为前端渲染、路由拦截的依据，用户篡改localStorage的值后只要刷新页面或者切换路由就会被重置为真实权限。
• 把用户角色、权限列表存在运行时内存中（比如React Context、Redux、Zustand等状态管理工具），页面刷新后重新从接口拉取，用户无法直接通过开发者工具修改内存中的状态值，避免本地存储被篡改的问题。
• 如果确实需要在localStorage中持久化角色信息，可对存储内容做签名校验：服务端返回角色时同步返回对应的哈希签名（签名规则为角色值+用户唯一ID+服务端密钥哈希计算），前端读取角色时先校验本地存储的角色和签名是否匹配，不匹配直接视为最低权限角色。

前端做权限控制的核心目的是给合法用户隐藏无权限的菜单、按钮，避免用户点击无权限操作后收到报错，优化使用体验，本身不具备安全防控能力，绝不能作为唯一的权限判断依据。

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