Clickvote项目中的用户模拟功能设计与实现

2025-05-11 13:02:33作者：钟日瑜

功能背景

在现代Web应用系统中，用户模拟(Impersonation)是一个常见且实用的功能，特别是在需要技术支持或调试的场景下。Clickvote项目作为一个投票系统，近期有开发者提出了添加管理员模拟普通用户的功能需求。这个功能允许管理员临时"扮演"其他用户，以便更好地理解用户遇到的问题或验证系统行为。

功能设计原理

用户模拟功能的核心设计思想是通过HTTP请求头来实现身份切换。具体实现方案包含以下几个关键技术点：

管理员标识：在用户模型中添加一个admin布尔标志，用于标识用户是否具有管理员权限
前端界面：在系统顶部添加一个浮动控制栏，当用户是管理员时显示，提供切换不同系统成员的下拉选择
请求头传递：当管理员选择模拟某个用户时，前端在每个请求中添加特殊的viewAs请求头，携带被模拟用户的ID
中间件处理：在后端的认证中间件(AuthMiddleware)中检查viewAs头，如果存在且当前用户是管理员，则临时将身份切换为指定用户

技术实现细节

用户模型扩展

首先需要在用户模型中添加管理员标志：

class User {
  id: string;
  username: string;
  // ...其他字段
  isAdmin: boolean; // 新增管理员标志
}

前端控制组件

实现一个浮动用户切换器组件，大致结构如下：

function ImpersonationBar() {
  const [users, setUsers] = useState([]);
  const [selectedUser, setSelectedUser] = useState(null);

  // 获取用户列表
  useEffect(() => {
    if (currentUser.isAdmin) {
      fetchUsers().then(setUsers);
    }
  }, []);

  // 切换用户处理
  const handleImpersonate = (userId) => {
    setSelectedUser(userId);
    // 设置viewAs头到所有后续请求
    api.setHeader('viewAs', userId);
  };

  return currentUser.isAdmin ? (
    <div className="impersonation-bar">
      <select onChange={(e) => handleImpersonate(e.target.value)}>
        <option value="">切换用户...</option>
        {users.map(user => (
          <option key={user.id} value={user.id}>{user.username}</option>
        ))}
      </select>
    </div>
  ) : null;
}

后端认证中间件

修改认证中间件以处理模拟请求：

class AuthMiddleware {
  async handle(ctx, next) {
    const userId = ctx.auth.user?.id;
    const viewAsId = ctx.request.header('viewAs');
    
    if (userId && viewAsId) {
      // 验证当前用户是否为管理员
      const isAdmin = await UserService.isAdmin(userId);
      if (isAdmin) {
        // 获取被模拟用户信息
        ctx.auth.user = await UserService.findById(viewAsId);
      }
    }
    
    await next();
  }
}