React+Redux项目如何根据用户角色控制组件及侧边栏图标显示

1. 修正基础代码的冗余问题 #

• 直接删除reducer中没用的case userConstants: return null逻辑，避免异常情况清空用户数据。
• 优先通过Redux存储用户信息，全局组件都可以复用，不用每次都重复解码token。

2. 优化侧边栏菜单项配置，避免硬编码权限判断 #

给每个菜单项新增requiredRoles字段，配置可访问该菜单的角色列表，后续新增角色、新增菜单时不用修改渲染逻辑，直接调整配置即可：

this.state = {
  userRoles: [],
  listItems: [
    {
      listText: '设置',
      listIcon: SettingIcon,
      expan: true,
      isExpanded: false,
      route: '/settings',
      key: "Setting",
      // 新增权限配置：仅管理员可见
      requiredRoles: ['Admin']
    },
    // 其他菜单示例：普通用户和管理员都可见
    {
      listText: '首页',
      listIcon: HomeIcon,
      expan: true,
      isExpanded: false,
      route: '/home',
      key: "Home",
      requiredRoles: ['Admin', 'User']
    }
  ]
}

3. 组件挂载时获取用户角色 #

componentDidMount() {
  // 触发action把用户数据存入Redux，全局组件都可调用
  this.props.getUserInfo()
  // 如果不想走Redux，也可以直接解码token获取角色存入组件state
  // const userData = this.props.getUser()
  // if (userData?.role) this.setState({ userRoles: userData.role })
}

4. 渲染时做权限过滤 #

渲染前先判断当前用户的角色是否在菜单的要求角色列表内，符合条件才渲染对应图标和菜单：

render() {
  // 从Redux取用户角色，也可以替换成state里的userRoles
  const currentUserRoles = this.props.userInfo?.userData?.role || []
  return (
    <div>
      {this.state.listItems.map((item, index) => {
        // 判断当前用户是否有该菜单的访问权限
        const hasPermission = item.requiredRoles.some(role => currentUserRoles.includes(role))
        if (!hasPermission) return null
        return (
          <div key={item.key}>
            <img src={item.listIcon} alt={item.listText} />
            <span>{item.listText}</span>
          </div>
        )
      })}
    </div>
  )
}

5. 同步完善PrivateRoute的权限校验 #

路由层面也增加角色校验逻辑，避免用户直接输入地址访问无权限页面：

// 扩展PrivateRoute，新增requiredRoles参数传入权限要求
<PrivateRoute path="/settings" component={waitFor(Settings)} requiredRoles={['Admin']} />

PrivateRoute内部增加角色判断逻辑，无权限的用户直接跳转403页或者首页即可。

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