如何使用来自 jQuery 的 AJAX 请求发送令牌答案

【问题标题】：How to send a token with an AJAX request from jQuery如何使用来自 jQuery 的 AJAX 请求发送令牌
【发布时间】：2016-06-22 00:32:49
【问题描述】：

我使用 express-jwt 并通过 jQuery 创建我的令牌并将其保存在我的 localStorage 中：

$.ajax({
  url: "http://localhost:8080/login",
  type: 'POST',
  data: formData,
  error : function(err) {
    console.log('Error!', err)
  },
  success: function(data) {
    console.log('Success!')
    localStorage.setItem('token', data.id_token);
  }
});

我的后端有一条受保护的路由，例如：

app.get('/upload',jwt({secret: config.secret}), function(req, res) {
  res.sendFile(path.join(__dirname + '/upload.html'));
});

如何通过请求标头从 localStorage 发送令牌？

【问题讨论】：

标签： javascript jquery express jwt express-jwt

【解决方案1】：

您可以在$.ajax 请求中设置标头：

$.ajax({
  url: "http://localhost:8080/login",
  type: 'GET',
  // Fetch the stored token from localStorage and set in the header
  headers: {"Authorization": localStorage.getItem('token')}
});

【讨论】：

为什么要将令牌发送到标头？为什么不进入数据？？
@ahmedbhs 我相信他试图以某种方式保护令牌。
对于 JWT 标头，这对我有用 headers: { "Authorization": 'Bearer ' + token }
在 Javascript 中像变量一样暴露 JWT 令牌时应该非常小心。绝对不要暴露在前端developer.okta.com/blog/2018/06/20/…

【解决方案2】：

如果您使用的是 JWT 身份验证，那么这就是您将其添加到 .ajax() 方法中的标头的方式：

headers: {
    Authorization: 'Bearer '+token
}

【讨论】：

【解决方案3】：

我使用下面的方法来覆盖带有结果状态类型的 JWT 身份验证

$.ajax({
  url: "http://localhost:8080/login",
  type: "POST",
  headers: { Authorization: $`Bearer ${localStorage.getItem("token")}` },
  data: formData,
  error: function(err) {
    switch (err.status) {
      case "400":
        // bad request
        break;
      case "401":
        // unauthorized
        break;
      case "403":
        // forbidden
        break;
      default:
        //Something bad happened
        break;
    }
  },
  success: function(data) {
    console.log("Success!");
  }
});

【讨论】：

但问题是如何将保存的令牌与请求一起发送。不是请求后如何保存令牌。