如何在Web应用的各JavaScript文件中共享服务端req.session.username数据？

根据你提供的服务端session配置，下面是几种可行的实现方案：

方法一：页面渲染时注入全局变量 #

这种方式最直接，在服务端返回HTML页面时，把req.session.username注入到页面的全局变量中，前端所有JS文件都能直接访问。

修改服务端代码（替换原res.sendFile逻辑） #

因为你当前用res.sendFile返回静态HTML，需要改成读取文件并替换占位符：

const fs = require('fs');
const path = require('path');

// 替换原来的res.sendFile代码块
app.get('/your-route', (req, res) => {
  const htmlPath = path.join(__dirname, "/webpages/CurrentProjects/currentProjects.html");
  fs.readFile(htmlPath, 'utf8', (err, htmlContent) => {
    if (err) {
      return res.status(500).send('页面加载失败');
    }
    // 替换HTML中的占位符，未登录时设为Guest或空值
    const username = req.session.username || 'Guest';
    const modifiedHtml = htmlContent.replace('{{USER_GLOBAL_VAR}}', username);
    res.send(modifiedHtml);
  });
});

在HTML中添加全局变量定义 #

在你的currentProjects.html的<head>里插入这段脚本：

<script>
  // 全局变量，所有前端JS文件都能访问
  window.currentUsername = '{{USER_GLOBAL_VAR}}';
</script>

之后，任意前端JS文件里直接用window.currentUsername（或简写currentUsername）就能拿到用户名。

方法二：通过API接口异步获取 #

如果不想修改页面渲染逻辑，可以在服务端加一个专门的接口，前端任何JS文件都能通过请求这个接口拿到用户名。

服务端添加接口 #

app.get('/api/current-user', (req, res) => {
  // 直接返回session中的用户名，未登录则返回null
  res.json({ username: req.session.username || null });
});

前端JS调用示例 #

在需要用户名的JS文件中，发起请求获取：

// 封装成工具函数，方便复用
async function getCurrentUsername() {
  try {
    const response = await fetch('/api/current-user');
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    return data.username;
  } catch (err) {
    console.error('获取用户名失败:', err);
    return null;
  }
}

// 使用示例
getCurrentUsername().then(username => {
  if (username) {
    console.log('当前用户:', username);
    // 执行后续逻辑
  }
});

方法三：利用Cookie传递（需注意安全风险） #

可以把req.session.username写入Cookie，前端JS读取Cookie拿到值，但要注意安全配置：

服务端配置Cookie #

修改session配置或单独添加中间件：

app.use(session({
  secret: "{😶}",
  resave: false,
  saveUninitialized: true,
  // 注意：httpOnly设为false才能让前端JS读取Cookie，但会增加XSS攻击风险
  cookie: { 
    httpOnly: false,
    // 生产环境建议开启secure，仅在HTTPS下传递Cookie
    secure: process.env.NODE_ENV === 'production' 
  }
}));

// 或者单独写中间件，把用户名写入Cookie
app.use((req, res, next) => {
  if (req.session.username) {
    res.cookie('username', req.session.username, {
      httpOnly: false,
      secure: process.env.NODE_ENV === 'production',
      maxAge: 24 * 60 * 60 * 1000 // 有效期1天
    });
  }
  next();
});

前端读取Cookie #

function getUsernameFromCookie() {
  const cookieArr = document.cookie.split(';').map(item => item.trim());
  for (const cookie of cookieArr) {
    const [key, value] = cookie.split('=');
    if (key === 'username') {
      return decodeURIComponent(value);
    }
  }
  return null;
}

// 使用
const username = getUsernameFromCookie();
console.log(username);

关键注意事项 #

• 安全优先：如果用Cookie方案，httpOnly: false会让Cookie暴露给前端JS，存在XSS窃取风险，务必确保你的页面没有XSS漏洞，生产环境建议配合secure和SameSite属性。
• 未登录处理：所有方案都要考虑req.session.username为空的情况，设置默认值（比如Guest）或做登录跳转逻辑。
• 模板引擎优化：如果你的项目后续规模变大，建议改用EJS、Pug等模板引擎，能更优雅地注入服务端数据，不用手动替换HTML占位符。

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