如何在Express/Node.js+MongoDB环境下用JWT显示当前登录用户名

嘿，这事儿其实挺简单的，咱们只需要两步就能搞定：把用户名从后端传递到模板，然后在页面里渲染出来。

第一步：修改后端路由，传递用户名到模板 #

你的Index.js里已经通过JWT解析出了包含user_name的profile对象，但目前只是渲染了页面，没把这个数据传给模板。咱们调整一下/homepage的路由代码，把用户名作为参数传给模板引擎：

router.get('/homepage', function(req, res, next) {
  try {
    var jwtString = req.cookies.Authorization.split(" ");
    var profile = verifyJwt(jwtString[1]);
    if (profile) {
      // 将用户名传递给hbs模板
      res.render('homepage', { username: profile.user_name });
    } else {
      // 解析失败时重定向到登录页（更符合页面路由的交互逻辑）
      res.redirect('/login');
    }
  } catch (err) {
    // 捕获JWT验证错误，同样重定向到登录页
    res.redirect('/login');
  }
});

这里要确保你的verifyJwt函数能正确解析JWT并返回包含user_name的对象，比如它的实现应该是这样的（如果还没完善的话）：

function verifyJwt(token) {
  try {
    return jwt.verify(token, 'JWT password'); // 密钥要和createJwt里的保持一致
  } catch (err) {
    return null;
  }
}

第二步：在homepage.hbs中渲染用户名 #

现在后端已经把username传给模板了，你只需要在homepage.hbs里用Handlebars的语法把它显示在合适位置就行，比如导航栏或者欢迎语里：

<div class="welcome-section">
  <h3>欢迎回来，{{username}}！</h3>
</div>

如果想传递整个用户信息对象，后端可以改成传递完整的profile：

res.render('homepage', { userProfile: profile });

然后模板里这样用：

欢迎回来，{{userProfile.user_name}}！

额外小提醒 #

• 登录接口返回的{'success' : 'currentlyloggedIn'}其实不影响功能，因为你已经通过Cookie存储了JWT，前端跳转逻辑没问题；
• 错误处理时，页面路由优先选择重定向到登录页，比返回JSON错误更符合用户体验。

这样修改后，用户登录跳转到首页就能看到自己的用户名啦！

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