如何在Express客户端（Pug）为请求头添加JWT以配合express-jwt鉴权

普通的<a>标签跳转属于浏览器原生GET请求，无法直接自定义请求头。针对你的场景，有几种可行方案：

方法一：使用Cookie存储JWT（推荐） #

这是最符合浏览器行为、实现简单且安全性较高的方案。浏览器会自动在每次请求中携带Cookie，无需手动处理请求头。

步骤1：登录成功后服务器设置Cookie #

在登录接口中，生成JWT后将其设置为HttpOnly类型的Cookie：

// 登录成功后生成token的逻辑
const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, { 
  algorithm: 'sha512',
  expiresIn: '1d'
});

// 设置Cookie
res.cookie('jwt', token, {
  httpOnly: true, // 禁止前端JS读取，防范XSS攻击
  secure: process.env.NODE_ENV === 'production', // 生产环境仅通过HTTPS传输
  maxAge: 24 * 60 * 60 * 1000 // Cookie有效期1天
});

步骤2：修改express-jwt配置从Cookie提取令牌 #

调整你的auth中间件，指定从Cookie中获取JWT：

const auth = jwt({
  secret: process.env.JWT_SECRET,
  algorithms: ['sha512'],
  userProperty: 'payload',
  getToken: (req) => {
    return req.cookies.jwt; // 对应Cookie的名称
  }
});

完成以上配置后，你的<a(href='/reqpage')>跳转请求会自动携带Cookie，express-jwt就能正常验证令牌并将用户信息附加到req.payload中。

方法二：通过JavaScript拦截a标签请求自定义请求头 #

如果必须通过Authorization头传递JWT，可以拦截a标签的点击事件，改用fetch发起带请求头的请求，再处理页面渲染。

步骤1：修改Pug模板给a标签添加标识类 #

a(href='/reqpage', class='auth-protected-link') 访问权限页面

步骤2：编写客户端JS拦截请求 #

// 监听所有带auth-protected-link类的a标签点击
document.querySelectorAll('.auth-protected-link').forEach(link => {
  link.addEventListener('click', async (e) => {
    e.preventDefault(); // 阻止原生跳转行为
    const targetUrl = link.getAttribute('href');
    const token = localStorage.getItem('jwt'); // 假设JWT存在localStorage中

    try {
      const response = await fetch(targetUrl, {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${token}` // 添加JWT到Authorization头
        }
      });

      if (response.ok) {
        // 加载返回的页面HTML并替换当前页面内容
        const pageHtml = await response.text();
        document.documentElement.innerHTML = pageHtml;
        // 更新浏览器历史记录，保证前进后退正常
        history.pushState({}, '', targetUrl);
      } else {
        // 权限验证失败时跳转到登录页
        window.location.href = '/login';
      }
    } catch (err) {
      console.error('请求失败:', err);
      window.location.href = '/login';
    }
  });
});

这种方式需要手动处理页面渲染和历史记录，体验不如原生跳转流畅，适合特殊场景使用。

方法三：通过URL查询参数传递JWT（不推荐） #

可以将JWT作为查询参数附加到URL中，但这种方式存在安全风险（令牌会暴露在URL、浏览器历史、服务器日志中），仅用于测试或非敏感场景：

步骤1：修改Pug模板拼接查询参数 #

- const token = localStorage.getItem('jwt');
a(href=`/reqpage?token=${token}`) 访问权限页面

步骤2：修改express-jwt配置从查询参数提取令牌 #

const auth = jwt({
  secret: process.env.JWT_SECRET,
  algorithms: ['sha512'],
  userProperty: 'payload',
  getToken: (req) => {
    return req.query.token;
  }
});

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