如何在EJS中根据用户登录状态动态引入对应header头部文件

问题排查及解决方案 #

你写的条件判断+include的逻辑本身没有EJS语法错误，无法运行通常是以下两个原因导致的，按顺序排查即可：

1. 确认登录状态变量正确传递 #

模板中用到的connect变量需要从服务端路由层主动传入，未传递的情况下变量值为undefined，会始终走else分支。
以Express框架为例，渲染模板的路由代码参考：

// 示例为session存储登录状态的场景，可根据你自己的登录态存储逻辑调整
app.get('/你的路由地址', (req, res) => {
  res.render('当前模板的文件名', {
    // 注意key必须和模板中使用的变量名完全一致，大小写也要匹配
    connect: req.session.isLogin ? true : false
  })
})

2. 确认partial文件路径正确 #

include的相对路径是相对于当前正在渲染的EJS模板文件所在位置的，比如：

• 当前模板存放在views/page/index.ejs
• 代码中写的../partials/header对应的实际文件路径为views/partials/header.ejs
  路径不匹配会直接抛出渲染错误，可先把if判断去掉，单独测试两个头部的引入是否能正常渲染，排除路径问题。

调试小技巧 #

可以在模板顶部临时加一行打印代码，确认connect变量的值符合预期：

<!-- 开发调试用，上线前删除即可 -->
<p style="display: none;">当前登录状态：<%= connect %></p>

完成上述排查后你的代码即可正常运行。

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