Ant Design Mobile of React如何实现角色控制和登录验证配合?

Question

使用Ant Design Mobile of React开发一个安卓小组成员信息管理系统移动应用，使用localstorage本地存储。实现角色控制和登录验证互相配合。角色有管理员、普通成员。请给一个完整示例代码和代码解读

Answer 1

import React, { useState } from 'react';  
import { Button, List, ListItem, Input, Checkbox, Modal } from 'antd-mobile';  
import { useLocalStorage } from 'react-localstorage';  
  
const TeamInfoManager = () => {  
  const [teamMembers, setTeamMembers] = useState([]);  
  const [currentUserRole, setCurrentUserRole] = useState('');  
  const [isModalVisible, setIsModalVisible] = useState(false);  
  const [selectedMember, setSelectedMember] = useState(null);  
  
  const [username, setUsername] = useState('');  
  const [password, setPassword] = useState('');  
  
  const [roles, setRoles] = useLocalStorage('roles', []);  
  
  const handleLogin = async () => {  
    // 这里可以进行登录验证逻辑，比如发送请求到服务器验证用户名和密码。  
    // 假设验证通过，将用户角色存储到 localStorage 中。  
    setRoles([...roles, { username, role: 'admin' }]);  
    setCurrentUserRole('admin');  
  };  
  
  const handleAddMember = () => {  
    setIsModalVisible(true);  
  };  
  
  const handleCloseModal = () => {  
    setIsModalVisible(false);  
    setSelectedMember(null);  
  };  
  
  const handleAddMemberToTeam = () => {  
    // 添加成员到团队逻辑，这里只是简单地将选中的成员状态存入 state。  
    setTeamMembers([...teamMembers, selectedMember]);  
    setIsModalVisible(false);  
  };  
  
  const handleRemoveMemberFromTeam = (member) => {  
    // 移除成员出团队的逻辑，这里只是简单地从团队成员数组中移除。  
    setTeamMembers(teamMembers.filter((m) => m !== member));  
  };  
  
  return (  
    <div>  
      {/* 登录表单 */}  
      <div>  
        <Input placeholder="Username" value={username} onChange={e => setUsername(e.target.value)} />  
        <Input placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />  
        <Button onClick={handleLogin}>Login</Button>  
      </div>  
      {/* 团队成员列表 */}  
      <List>  
        {teamMembers.map((member, index) => (  
          <ListItem key={index}>{member}</ListItem>  
        ))}  
      </List>  
      {/* 添加成员的模态框 */}  
      <Modal title="Add Member" visible={isModalVisible} onClose={handleCloseModal}>  
        <Input placeholder="Member Name" value={selectedMember} onChange={e => setSelectedMember(e.target.value)} />  
        <Button onClick={handleAddMemberToTeam}>Add</Button>{' '}  
        <Button onClick={handleCloseModal}>Cancel</Button>  
      </Modal>{' '}  
      {/* 移除成员的按钮 */}  
      <Button onClick={handleRemoveMemberFromTeam}>Remove Member</Button>{' '}  
    </div>  
  );  
};