如何在Handlebars中访问Cookie？实现首页登录状态校验

1. 后端解析Cookie中的JWT并传递状态到Handlebars模板 #

在后端（以Express为例）通过中间件读取Cookie里的JWT令牌，验证有效性后，将登录状态注入Handlebars的渲染上下文，让模板可以直接使用这些状态。

示例代码（Express + jsonwebtoken） #

const jwt = require('jsonwebtoken');
const express = require('express');
const cookieParser = require('cookie-parser'); // 需先安装该依赖
const app = express();

app.use(cookieParser());

// 自定义中间件：处理JWT验证与状态传递
app.use((req, res, next) => {
  const token = req.cookies.authToken; // 假设存储JWT的Cookie名为authToken
  res.locals.isLoggedIn = false;
  res.locals.user = null;

  if (token) {
    try {
      // 验证JWT，替换为你的实际密钥
      const decoded = jwt.verify(token, 'your-jwt-secret-key');
      res.locals.isLoggedIn = true;
      res.locals.user = decoded.user; // 假设JWT payload包含用户信息
    } catch (err) {
      // 令牌无效/过期，保持未登录状态
    }
  }
  next();
});

// 渲染首页时自动带入状态
app.get('/', (req, res) => {
  res.render('home'); // Handlebars会自动读取res.locals中的变量
});

2. 在Handlebars模板中根据状态渲染差异化内容 #

在首页模板（如home.hbs）中，使用Handlebars的条件语法判断登录状态，展示对应内容：

示例模板代码 #

<!DOCTYPE html>
<html>
<head>
  <title>首页</title>
</head>
<body>
  <nav>
    {{#if isLoggedIn}}
      <span>欢迎，{{user.nickname}}！</span>
      <a href="/logout">退出登录</a>
    {{else}}
      <a href="/login">登录</a>
      <a href="/register">注册</a>
    {{/if}}
  </nav>

  <main>
    {{#if isLoggedIn}}
      <div class="user-content">
        <h2>专属内容区</h2>
        <p>只有登录用户才能看到这里的内容</p>
      </div>
    {{else}}
      <div class="guest-content">
        <h2>欢迎访问</h2>
        <p>登录后可解锁更多功能</p>
      </div>
    {{/if}}
  </main>
</body>
</html>

3. 前端辅助验证（可选） #

如果需要前端做一些交互逻辑（比如发起API请求前确认令牌存在），可以在模板中嵌入少量JS读取Cookie：

<script>
// 工具函数：获取指定Cookie
function getCookie(name) {
  const cookieStr = `; ${document.cookie}`;
  const cookieParts = cookieStr.split(`; ${name}=`);
  return cookieParts.length === 2 ? cookieParts.pop().split(';').shift() : null;
}

const token = getCookie('authToken');
if (token) {
  // 前端仅做解析展示，核心验证仍需依赖后端
  const payload = JSON.parse(atob(token.split('.')[1]));
  console.log('当前用户信息:', payload.user);
} else {
  console.log('用户未登录');
}
</script>

重要提醒：前端仅能做辅助展示，所有涉及权限控制的核心逻辑必须放在后端，避免前端篡改状态绕过验证。

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