登录成功后如何在EJS页面获取Node.js返回的JSON状态以动态切换头部内容

嘿，看了你的问题和代码，你已经把登录接口的核心逻辑搞定了——能返回status:'ok'还能把JWT存在Cookie里，现在就差把登录状态传到EJS模板，实现头部内容的动态切换对吧？我给你捋清楚具体步骤：

一、先搞定后端：把用户状态传给EJS #

EJS是服务端渲染的模板，所以得在渲染页面的路由里先验证Cookie里的JWT，判断用户是不是已经登录，然后把状态和用户信息丢给模板。

1. 整个JWT验证的中间件 #

先整个通用的中间件，所有需要判断登录状态的路由都能用：

const jwt = require('jsonwebtoken');
const User = require('../model/user');

// 验证JWT并获取用户信息的中间件
const authenticateUser = async (req, res, next) => {
  // 从Cookie里拿之前存的token
  const token = req.cookies.userRegister;
  
  if (token) {
    try {
      // 解密JWT，拿到用户ID和用户名
      const decoded = jwt.verify(token, process.env.JWT_SECRET);
      // 去数据库查用户的基础信息（别查密码哈！只拿头像、用户名这些需要展示的）
      const user = await User.query('SELECT id, username, avatar FROM users WHERE id = ?', [decoded.id]);
      
      if (user[0]) {
        // 把用户信息挂在req上，后面路由就能直接用了
        req.user = user[0];
      }
    } catch (err) {
      // 要是token无效或者过期，直接清掉Cookie
      res.clearCookie('userRegister');
      console.error('JWT验证翻车了:', err);
    }
  }
  // 不管登没登录，都继续走后面的路由
  next();
};

module.exports = authenticateUser;

2. 在页面路由里用这个中间件 #

比如你的首页路由，得先过一遍这个中间件，再把登录状态传给EJS：

const express = require('express');
const router = express.Router();
const authenticateUser = require('../middleware/authenticateUser');

// 首页路由，先验证用户状态
router.get('/', authenticateUser, (req, res) => {
  // 给EJS传两个关键数据：isLoggedIn是布尔值，user是用户信息（登录了才有）
  res.render('index', {
    isLoggedIn: !!req.user,
    user: req.user || null
  });
});

module.exports = router;

对了，别忘了给你的Express app加个Cookie解析的中间件，不然读不到req.cookies：

const cookieParser = require('cookie-parser');
app.use(cookieParser());

二、然后是EJS模板：根据状态切换内容 #

在你的头部模板（比如header.ejs）里，用EJS的条件判断语法就行，很简单：

<header class="site-header">
  <div class="header-inner">
    <!-- 登录成功的情况：显示头像和用户名 -->
    <% if (isLoggedIn) { %>
      <div class="user-profile">
        <!-- 要是用户没上传头像，就用默认图 -->
        <img src="<%= user.avatar || '/images/default-avatar.png' %>" alt="用户头像" class="avatar">
        <span class="username"><%= user.username %></span>
        <!-- 再加个退出登录的按钮，体验更完整 -->
        <form action="/logout" method="POST" class="logout-form">
          <button type="submit" class="btn btn-small">退出</button>
        </form>
      </div>
    <% } else { %>
      <!-- 未登录的情况：显示登录、注册按钮 -->
      <div class="auth-links">
        <a href="/login" class="btn">登录</a>
        <a href="/register" class="btn btn-secondary">注册</a>
      </div>
    <% } %>
  </div>
</header>

三、补个退出登录的路由（可选但很有必要） #

总不能只登录不退出吧？整个简单的退出路由：

router.post('/logout', (req, res) => {
  // 清掉存JWT的Cookie
  res.clearCookie('userRegister');
  // 重定向回首页或者登录页
  res.redirect('/');
});

为啥不用前端直接处理登录返回的JSON？ #

因为你用的是EJS服务端渲染，页面是服务器生成好再发给浏览器的，所以必须在服务器先判断登录状态，再把数据塞给模板渲染。如果是前后端分离的SPA，才会在前端用AJAX拿状态再操作DOM，但你的场景用服务端传数据是最直接的方案。

内容的提问来源于stack exchange，提问作者Xuân Nguyễn Viết