React+Redux Toolkit项目中如何判断当前登录用户类型？

1. 从Redux获取用户状态 #

首先通过Redux的useSelector钩子获取当前登录用户的信息和状态：

import { useSelector, useDispatch } from 'react-redux';
import { logout } from './path-to-auth-slice'; // 导入你的logout action
import { RootState } from './path-to-redux-store'; // 你的RootState类型定义

const Navbar = () => {
  // 获取当前用户信息
  const currentUser = useSelector((state: RootState) => state.auth.user);
  // 获取登录状态（加载中/空闲）
  const isAuthLoading = useSelector((state: RootState) => state.auth.status === 'loading');
  const dispatch = useDispatch();

2. 编写角色判断工具函数 #

为简化条件判断，封装函数检查用户是否拥有指定角色：

// 检查用户是否包含目标角色
const hasRole = (targetRole: 'admin' | 'group_admin' | 'employee') => {
  return currentUser?.roles.includes(targetRole) ?? false;
};

3. 基于角色条件渲染导航项 #

根据用户角色显示对应导航内容，同时处理加载状态：

// 加载状态下显示占位符
if (isAuthLoading) {
  return <div className="navbar-loading">加载中...</div>;
}

return (
  <nav className="navbar">
    <ul>
      {/* 所有用户可见的基础导航 */}
      <li><a href="/dashboard">仪表盘</a></li>
      <li><a href="/profile">个人资料</a></li>

      {/* 仅管理员可见 */}
      {hasRole('admin') && <li><a href="/admin-panel">管理面板</a></li>}

      {/* 管理员和组管理员可见 */}
      {(hasRole('admin') || hasRole('group_admin')) && (
        <li><a href="/team-management">团队管理</a></li>
      )}

      {/* 仅普通员工可见 */}
      {hasRole('employee') && <li><a href="/leave-request">请假申请</a></li>}

      {/* 退出登录按钮 */}
      <li>
        <button onClick={() => dispatch(logout())}>退出登录</button>
      </li>
    </ul>
  </nav>
);
};

export default Navbar;

4. 关于useEffect的使用场景 #

若无需在角色变化时执行额外逻辑，上述代码已足够。如需处理副作用（比如请求对应权限的数据），可添加useEffect监听用户角色变化：

import { useEffect } from 'react';
// 假设你有对应的异步action
import { fetchAdminStats, fetchTeamData } from './path-to-actions';

const Navbar = () => {
  // ... 之前的变量定义

  useEffect(() => {
    if (currentUser) {
      // 管理员加载统计数据
      if (hasRole('admin')) {
        dispatch(fetchAdminStats());
      }
      // 组管理员加载所属团队数据
      else if (hasRole('group_admin') && currentUser.teams) {
        dispatch(fetchTeamData(currentUser.teams));
      }
    }
  }, [currentUser, dispatch]); // 依赖变化时重新执行

  // ... 渲染逻辑
};

注意事项 #

• 确保RootState类型正确定义，让useSelector能准确推断状态类型
• 角色判断时要考虑currentUser为null的情况（未登录状态），避免报错
• 若有更多角色或复杂权限规则，可扩展hasRole函数为多角色判断（比如hasAnyRole、hasAllRoles）

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