Question

我有一个用香草JS，Pug和Node编写的简单多页应用程序，该应用程序使用JWT登录。当用户登录时，将向客户端返回JWT。 JWT存储在localStorage中。这是我的客户端ajax请求，用于用户何时登录并返回令牌：

$.ajax({
    url: "/login",
    type: "POST",
    data: { arr },
    success: (res) => {
      if (res.status == 200) {
        localStorage.setItem("token", res.token);
        console.log("success");
      }
    },
    error: (err) => { console.log(err) }
  });

上面的方法很好。

网站上的每个页面都有许多不同的链接或按钮：/home，/profile，/about等。某些路由受到保护（仅适用于登录用户），这就是为什么我首先使用JWT的原因。我在YouTube教程中看到，JWT应该存储在localStorage中，并在标头中发送请求。我相信我已经拥有服务器端中间件，可以成功检查标头中是否有有效的JWT。我的问题是：当用户单击页面上的链接时，如何将JWT添加到请求标头中，，以便随后在服务器端进行验证？考虑到我使用的是香草JS，还是可以使用其他解决方案？

这是我网站的典型页面（用哈巴狗编写）。

body
    h1 History of changes
    div View previous changes
    br
    each val, ind in histArr
      div.history
        a(href="/diff/" + val.numb)
          button See changes
        span= " " + val.date + " " + val.author + " " + val.message
      br

    a(href="/history")
      button /history
    a(href="/")
      button home
    a(href="/profile")
      button profile

当用户单击这些按钮时，如何将JWT添加到标题中？

编辑

例如：一个用户在我网站的主页上。他们单击链接是受保护的路由。我想在呈现页面之前检查它们是否已登录（即拥有JWT）。如何将JWT添加到请求标头中以进行检查？更具体地说，使用ajax调用是将我的JWT添加到请求标头的唯一方法，还是还有另一种方法？

Answer 1

以这种方式传递来自Ajax的标头...

$.ajax({
 type: "POST",
 beforeSend: function(request) {
   request.setRequestHeader("token", {{{token}}); // Set dynamic token 
 },
 url: "/login",
 ... 
});

另一种方式：

$.ajax({
  url: 'YourRestEndPoint',
  headers: {
    'Authorization': {{token}},
    'Content-Type':'application/json'
  },
  method: 'POST',
  dataType: 'json',
  data: YourData,
  success: function(data){
    console.log('succes: '+data);
  }
});

查看此https://docs.python.org/3/library/functions.html#help

更新

请选中此link以在普通js中传递标头。

var httpHandler = function (err, str, contentType) {
  if (err) {
    res.writeHead(500, {'Content-Type': 'text/plain'});
    res.end('An error has occured: ' + err.message);
  } else {
    res.writeHead(200, {'Content-Type': contentType});
    res.end(str);
  }
};

现在，您可以尝试在writeHear附近设置。

Answer 2

您可以这样设置标题：

$.ajax({
  url: 'ajax_url',
  ...
  headers: {
    'Authorization': 'Bearer ' + 'your_token'
  }
})

如何在请求标头中添加jsonwebtoken（JWT）？

2 个答案: