React 项目实践

如何设计 React 应用的权限、角色和多租户隔离？

高级回答必须区分“页面能不能看到”和“服务端是否允许操作”，并把租户边界贯穿数据链路。

适合阶段：高级前端 / 资深前端 / 全栈前端核心能力：授权模型 · 安全边界 · 数据隔离

面试官想考什么

• 认证和授权有什么区别？ 考察安全基础。
• 前端隐藏按钮能否保证权限安全？ 考察是否知道服务端是最终边界。
• 多租户数据如何隔离？ 考察缓存、请求和状态中的租户意识。
• 权限变更如何即时生效？ 考察 session、缓存和撤销设计。

一句话回答

前端权限负责改善导航和交互，服务端权限负责最终授权；租户上下文必须进入每次资源访问、缓存键、审计和错误处理。

面试回答详解

1. 先区分三类问题

• 认证：确认用户是谁，通常依赖 session、Cookie 或 token。
• 授权：确认用户能否对某个资源执行某个动作。
• 租户隔离：确认资源属于哪个组织、项目或租户上下文。

用户身份 -> 当前租户 -> 资源归属 -> 动作权限 -> 审计结果

2. React 侧负责什么

React 可以根据权限生成菜单、路由守卫、按钮状态和空页面，但这些都是体验层。权限状态应来自可信服务端响应，避免把可伪造的 localStorage 当成唯一依据。切换租户时要清理旧租户的查询缓存和局部状态。

3. 服务端协作

API 或 Server Function 必须重新校验 session、租户和资源归属。RBAC 适合稳定角色，ABAC 或 policy engine 适合资源属性、组织层级和动态条件。错误响应要避免泄露资源是否存在的敏感信息。

4. 生产风险

关注 IDOR、缓存跨租户污染、权限变更后的旧 token、并行请求使用旧租户、前端预取泄露和审计缺失。权限规则应有允许、拒绝和边界案例测试。

可直接背诵的 30 秒回答

我会把认证、授权和租户隔离分开设计。React 侧只负责菜单、路由和按钮的体验控制，不能把隐藏 UI 当安全措施；真正资源访问和 mutation 必须在服务端再次校验用户、租户、资源归属和动作权限。租户切换时还要清理查询缓存，日志和审计要能追踪权限决策。

扩展知识

权限检查位置

入口重定向 -> 页面体验 -> API/Action 资源授权 -> 数据库行级约束 -> 审计

面试官追问链

追问一：把权限放 localStorage 有什么问题？

• 考察点：是否理解客户端数据可篡改。
• 回答方向：它最多用于缓存展示信息，不能作为授权依据；服务端应校验不可伪造或可验证的 session，并处理撤销和过期。

追问二：租户切换后页面显示了旧租户数据，怎么查？

• 考察点：是否能定位状态和缓存污染。
• 回答方向：检查 query key、预取、请求取消、全局 store、Router 状态和浏览器缓存；切换时使旧查询失效并阻断过期响应回写。

追问三：RBAC 不够用了怎么办？

• 考察点：是否能做模型演进。
• 回答方向：把稳定角色与资源属性条件分开，逐步引入 ABAC 或策略服务，同时保留审计、缓存失效和回滚能力。

推荐阅读

• React Managing State
• React Context API
• OWASP Authorization Cheat Sheet
• React 项目实践