如何通过 jQuery 的 AJAX 请求发送令牌

Question

我使用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 发送令牌？

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

Answer 2

如果您使用 JWT 身份验证，则可以将其添加到 .ajax() 方法中的标头中：

headers: {
    Authorization: 'Bearer '+token
}

,

Answer 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!");
  }
});

Answer 4

如果您使用 JWT，也可以这样做，

     $.ajax({
        type: 'get', // or any other method you want
        dataType: 'json', 
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Authorization", "Bearer " + token);
        },
        url: `your-endpoint`,
        success: (data, status, xhr) => {
            if (data.status) {
               //Do something
            } else {
                console.warn("AJax failed");
            }
        },
        error: (xhr, textStatus, errorMessage) => {
            console.log(xhr.responseJSON.message);
        }
    });