React+Firebase幼儿园应用中基于用户角色隐藏组件的实现方案咨询

你原本用if/else判断用户角色控制组件显隐的逻辑是完全合理的，是前端简单权限控制的标准实现方案，针对你的代码可以按下面的步骤修改即可实现需求：

第一步：确认用户角色字段 #

首先确保你Firebase的users集合中，每个用户文档都有role字段，用来标记用户身份，比如：

• 家长角色值为parent
• 老师/管理员角色值为teacher/admin

第二步：修改日历组件代码 #

你已经通过Redux把当前登录用户注入到了组件props中（你命名为了eintrag），直接在需要隐藏的区域外层加角色判断即可：

function DateAndTimePickers(props) {
  const classes = useStyles();
  // 先拿到当前登录用户
  const currentUser = props.eintrag;
  // 其他原有逻辑不变...

  return (
    <ScrollView style={styles.root}>
      {/* 只有非家长角色可以看到新增事件表单 */}
      {currentUser?.role !== 'parent' && (
        <>
          {/* 这里放你原来//hide注释下的所有表单代码：日期选择、地点、备注输入框和提交按钮 */}
          <Container>
            <TextField
              id="datetime-local"
              label="Neues Ereigniss"
              type="datetime-local"
              defaultValue="2021-09-16T10:30"
              className={classes.root}
              InputLabelProps={{
                shrink: true,
              }}
              onChange={(value) => {
                handelDateandTime(value);
              }}
            />
          </Container>
          {/* 其他输入框和提交按钮的原有代码 */}
          <Container>
            <Button onClick={() => KalenderEintrag()}  className={classes.btn} variant="outlined">Absenden</Button>
          </Container>
        </>
      )}

      {/* 原有展示日历条目的代码，所有用户都可见，不需要改 */}
      {eintragen.map((item) => {
        // 原有渲染逻辑不变
      })}
    </ScrollView>
  )
}

可选优化：封装通用权限组件 #

如果你的应用里有多处需要按角色控制显隐的内容，可以封装一个通用的权限组件，避免重复写判断逻辑：

// 新建PermissionGuard.js
const PermissionGuard = ({ allowedRoles, currentUser, children }) => {
  // 当前用户不存在，或者角色不在允许列表里就不渲染内容
  if (!currentUser || !allowedRoles.includes(currentUser.role)) return null;
  return children;
}
export default PermissionGuard;

使用的时候直接包裹需要控制的内容即可：

<PermissionGuard allowedRoles={['teacher', 'admin']} currentUser={currentUser}>
  {/* 要控制显隐的内容 */}
</PermissionGuard>

重要安全提示 #

前端的组件隐藏只是视觉层面的控制，恶意用户可以通过修改前端代码绕过判断，必须配合Firebase安全规则做后端权限拦截，才能保证数据安全，示例规则如下：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 日历条目规则：所有登录用户可看，只有老师/管理员可新增编辑
    match /eintrag/{eintragId} {
      allow read: if request.auth != null;
      allow write: if request.auth != null && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role in ['teacher', 'admin'];
    }
    // 用户文档规则：用户只能操作自己的文档
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

另外你当前的useAllUsers钩子是拉取全量用户数据，这个场景下不需要用到，如果你其他地方没有使用需求可以去掉，减少不必要的接口请求。

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