新手求助：如何从MongoDB拉取用户名并在Navbar显示？

一、先修复mongodb/lib/db模块找不到的错误 #

• 你直接引用mongodb/lib/db是错的，这是MongoDB驱动的内部模块，不对外暴露，官方不支持直接调用。先确保已经通过npm install mongodb安装了官方驱动，然后改用标准的连接方式：

// 正确引入MongoDB客户端（CommonJS写法）
const { MongoClient } = require('mongodb');
// 如果是ES模块，用：import { MongoClient } from 'mongodb';

// 数据库连接字符串
const uri = 'mongodb://localhost:27017/你的数据库名';
const client = new MongoClient(uri);

// 封装连接函数
async function connectDB() {
  try {
    await client.connect();
    return client.db();
  } catch (err) {
    console.error('数据库连接失败', err);
    throw err;
  }
}

module.exports = connectDB;

• 把你DAL代码里所有引用mongodb/lib/db的地方，全部替换成上面的标准连接逻辑，内部模块路径随时可能变更，绝对不能依赖。

二、不用Cookie/Session显示用户名的可行方案 #

不想用Cookie或Session的话，推荐用LocalStorage存储用户名（或结合JWT做安全验证），步骤如下：

1. 登录时存储用户名到LocalStorage #

用户登录成功后，从后端返回的用户数据里取出用户名，存在LocalStorage：

// 假设登录接口返回的用户数据里包含username
const username = response.data.username;
localStorage.setItem('currentUser', username);
// 如果需要关闭浏览器就清除，改用sessionStorage.setItem('currentUser', username)

2. Navbar组件中读取并显示 #

修改你的findName函数，直接从LocalStorage读取：

function findName() {
  return localStorage.getItem('currentUser') || '游客';
}

// 组件渲染部分
return (
  <nav className="navbar">
    {/* 其他导航元素 */}
    <div className="user-avatar">
      {findName()}
    </div>
  </nav>
);

3. 可选：加一层安全验证（防止前端篡改） #

LocalStorage可以被用户手动修改，如果要确保显示的是真实登录用户，可在Navbar挂载时向后端发起无状态验证请求（用JWT）：

// 登录时同时存JWT到LocalStorage
localStorage.setItem('token', response.data.token);

// Navbar组件里的验证逻辑
async function verifyUser() {
  const token = localStorage.getItem('token');
  if (!token) return;
  
  try {
    const res = await fetch('/api/verify-user', {
      headers: { 'Authorization': `Bearer ${token}` }
    });
    const data = await res.json();
    if (data.success) {
      localStorage.setItem('currentUser', data.username);
      // 更新组件状态显示正确用户名
    } else {
      localStorage.removeItem('currentUser');
      localStorage.removeItem('token');
    }
  } catch (err) {
    localStorage.removeItem('currentUser');
    localStorage.removeItem('token');
  }
}

// 组件挂载时调用验证
useEffect(() => {
  verifyUser();
}, []);

4. DAL层配合验证接口的示例 #

在你的DAL里写一个查询用户名的函数，供后端验证接口调用：

const connectDB = require('./connectDB');

async function getUsernameById(userId) {
  const db = await connectDB();
  const user = await db.collection('users').findOne(
    { _id: userId },
    { projection: { username: 1, _id: 0 } }
  );
  return user?.username || null;
}

module.exports = { getUsernameById };

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