如何将jsonwebtoken（JWT）添加到请求头？

我有一个简单的多页面应用程序，用vanillaJS、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添加到请求头中，这样我就可以进行服务器端验证了？考虑到我使用的是vanilla JS，这可能吗？还是我需要一个不同的解决方案

这是我的网站的一个典型页面（用帕格书写）

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

编辑

---

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

以这种方式从

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);
  }
});

看这个

更新

请检查此项以传递vanilla 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

处设置near

以这种方式从

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);
  }
});

看这个

更新

请检查此项以传递vanilla 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

处设置near

您可以这样设置标题：

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

---

您可以这样设置标题：

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

---

可能重复的可能重复的，所以如果我想包含令牌，我需要每个链接来发出ajax请求？我不能再拥有一个简单的链接了？@Scott我没听明白你的意思（如果用户在我的网站主页上，并希望查看他们的个人资料，他们可以单击显示“个人资料”的链接。）但我想在我呈现他们的个人资料之前检查他们是否登录。只有他们登录后，他们才能进入他们的个人资料页面。因此，我想在他们单击个人资料链接时检查他们是否有有效的JWT。我现在必须通过ajax请求来设置标题？不能再使用简单的链接了吗？@Scott你可以检查用户是否是logg不管你是否加入，然后你可以基于令牌进行检查，在链接和其他方面，这取决于你如何管理基本上我想我已经弄明白的是，这个解决方案只适用于像React这样的框架（可能是Angular，可能是其他，我只使用React），因为您可以使用这些框架将JWT令牌传递给服务器并呈现视图，而使用Vanilla JS（使用ajax）你无法做到这一点，但仍然可以保护你的路由。因此，由于我使用的是Vanilla JS，我需要另一种解决方案，如cookies。因此，如果我想包含令牌，我需要每个链接来发出ajax请求？我不能再拥有一个简单的链接了？@Scott，我没有得到你：（如果用户在我的网站主页上，并希望查看他们的个人资料，他们可以单击显示“个人资料”的链接。）但我想在我呈现他们的个人资料之前检查他们是否登录。只有他们登录后，他们才能进入他们的个人资料页面。因此，我想在他们单击个人资料链接时检查他们是否有有效的JWT。我现在必须通过ajax请求来设置标题？不能再使用简单的链接了吗？@Scott你可以检查用户是否是logg不管你是否加入，然后你可以基于令牌进行检查，在链接和其他方面，这取决于你如何管理基本上我想我已经弄明白的是，这个解决方案只适用于像React这样的框架（可能是Angular，可能是其他，我只使用React），因为您可以使用这些框架将JWT令牌传递给服务器并呈现视图，而使用Vanilla JS（使用ajax）你无法做到这一点，但仍然可以保护你的路由。因此，由于我使用的是Vanilla JS，我需要另一种解决方案，如cookies。那么，我现在需要为我网站上的每个受保护路由执行ajax调用吗？例如，如果用户在我网站的主页上，想要查看他们的配置文件，他们可以单击显示“配置文件”的链接，但我想检查以确保他们已登录（即，拥有有效的JWT）在我呈现他们的个人资料页面之前。所以每个受保护的路由现在都需要一个ajax请求来设置标头？我不能单独设置标头，并且在我的页面上仍然有一个简单的链接？我想在这种情况下，你必须使用中间件来发送每个请求的令牌。我不知道如何用香草编写它，但使用Vuejs或ReactJs，我们需要这样做。我需要这样做吗d现在是否要对我网站上的每个受保护路由进行ajax调用？例如，如果用户在我网站的主页上，并希望查看他们的个人资料，他们可以单击显示“个人资料”的链接，但我希望检查以确保他们已登录（即，拥有有效的JWT）在我呈现他们的个人资料页面之前。所以每个受保护的路由现在都需要一个ajax请求来设置标头？我不能单独设置标头，并且在我的页面上仍然有一个简单的链接？我想在这种情况下，您必须使用中间件来发送每个请求的令牌。我不知道如何用香草编写它，但使用Vuejs或ReactJs，我们需要这样做。