React应用中基于角色的权限实现及用户信息缓存问题

一、避免重复API调用：用户信息存储方案 #

1. 全局状态管理（推荐） #

用React Context API或Redux Toolkit把用户角色、基础信息存在全局状态，登录后仅调用一次API获取，后续所有组件直接从全局状态读取，无需重复请求。

示例（React Context实现）：

// 创建用户上下文
const UserContext = React.createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  // 初始化时获取一次用户信息
  useEffect(() => {
    const fetchUserInfo = async () => {
      try {
        const res = await axios.post(
          "http://localhost:5000/api/auth/role",
          _id,
          config
        );
        setUser(res.data);
      } catch (err) {
        console.error("获取用户信息失败:", err);
      }
    };
    fetchUserInfo();
  }, []);

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
}

// 在任意组件中读取用户信息
const user = useContext(UserContext);

2. 本地存储（LocalStorage/SessionStorage） #

将非敏感的用户信息（如角色）存在localStorage，页面刷新后无需重新请求API。注意不要存储敏感数据（如token建议存在HttpOnly Cookie），且用户登出时要清空存储。

示例：

// 获取用户信息后存入本地
const res = await axios.post(
  "http://localhost:5000/api/auth/role",
  _id,
  config
);
localStorage.setItem('userInfo', JSON.stringify(res.data));

// 组件中直接读取
const user = JSON.parse(localStorage.getItem('userInfo'));

二、组件局部内容的显示/隐藏控制 #

1. 直接条件渲染 #

在组件内部根据用户角色做判断，只渲染对应权限的内容，无需修改路由数组。

示例（导航项控制）：

<nav>
  <ul>
    <li>首页</li>
    {user?.role === 'admin' && <li>系统设置</li>}
    {user?.role === 'editor' && <li>内容管理</li>}
    <li>个人中心</li>
  </ul>
</nav>

示例（区块内容控制）：

<div className="dashboard">
  <div className="common-stats">通用数据统计</div>
  {/* 仅管理员可见的区块 */}
  {user?.role === 'admin' && (
    <div className="admin-block">
      <button>重置用户权限</button>
      <div>系统操作日志</div>
    </div>
  )}
</div>

2. 路由级权限控制 #

如果是路由层面的权限校验，不要直接修改路由数组，用React Router的Navigate组件做路由守卫：

<Route path="/admin" element={
  user?.role === 'admin' ? <AdminDashboard /> : <Navigate to="/" replace />
} />

3. 封装权限复用逻辑 #

把角色判断逻辑封装成自定义Hook，减少重复代码：

function useHasRole(targetRole) {
  const user = useContext(UserContext);
  return user?.role === targetRole;
}

// 组件中使用
const isAdmin = useHasRole('admin');
{isAdmin && <AdminExclusiveSection />}

三、关键注意事项 #

• 前端权限控制仅为体验层隐藏，所有敏感接口必须依赖后端的权限校验，防止用户通过修改前端代码绕过限制。
• 使用本地存储时，要监听用户角色变更事件，及时更新存储内容，避免信息过期。

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