如何基于express-session变量动态修改前端HTML页面内容？

下面分两种常见场景给出实现方案：

一、服务器端渲染（使用Express模板引擎） #

如果你的项目用EJS、Pug这类后端模板引擎直接渲染页面，直接在路由中把会话变量传递给模板，再在模板里做条件渲染即可。

1. 修改首页路由 #

在处理GET /的路由中，把session里的登录状态和用户名传给模板：

app.get('/', (req, res) => {
  // 从session中获取状态，默认未登录
  const loginState = {
    loggedIn: req.session.loggedIn ?? false,
    username: req.session.username ?? ''
  };
  // 渲染首页模板并传递状态
  res.render('index', loginState);
});

2. 在前端模板中做条件渲染 #

以EJS为例，在index.ejs里根据传入的变量切换显示内容：

<!-- 身份操作容器 -->
<div class="auth-section">
  <% if (!loggedIn) { %>
    <button class="auth-btn">登录</button>
    <button class="auth-btn">注册</button>
  <% } else { %>
    <span class="welcome-text">欢迎回来，<%= username %>！</span>
  <% } %>
</div>

二、前后端分离（单页应用） #

如果是前端单独部署的SPA，通过AJAX请求后端接口获取会话状态，再动态修改DOM。

1. 后端新增登录状态接口 #

app.get('/api/auth/status', (req, res) => {
  res.json({
    loggedIn: req.session.loggedIn ?? false,
    username: req.session.username ?? ''
  });
});

2. 前端请求接口并更新页面 #

页面加载时请求接口，根据返回结果切换显示：

// 页面初始化时检查登录状态
window.onload = async () => {
  const authContainer = document.getElementById('auth-container');
  try {
    const res = await fetch('/api/auth/status');
    const data = await res.json();
    
    if (data.loggedIn) {
      authContainer.innerHTML = `<p>你好，${data.username}</p>`;
    } else {
      authContainer.innerHTML = `
        <button>登录</button>
        <button>注册</button>
      `;
    }
  } catch (err) {
    console.error('获取登录状态失败:', err);
    // 异常情况默认显示未登录状态
    authContainer.innerHTML = '<button>登录</button><button>注册</button>';
  }
};

对应的前端HTML需要有一个容器：

<div id="auth-container"></div>

注意事项 #

• 确保express-session的基础配置正确，比如secret（必填）、resave: false、saveUninitialized: false，保证会话能正常存储和读取
• 服务器端渲染场景下，要提前在Express中配置好对应的模板引擎（比如EJS：app.set('view engine', 'ejs')）
• 前后端分离跨域场景下，需要在Express中配置CORS，并确保会话Cookie的sameSite、domain参数设置正确，避免跨域无法携带会话

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