使用 jQuery 发送 AJAX 请求时，如何携带 Token

在使用 JWT (JSON Web Token) 进行用户认证的 Web 应用中，前端通常需要在发起 AJAX 请求时，将存储在本地的 token 附带在请求中，以便后端验证用户身份。本文将介绍如何使用 jQuery 的 AJAX 方法来实现这一目标。

场景

假设我们有一个受保护的路由 /upload，需要用户登录后才能访问。后端使用 express-jwt 中间件来验证 JWT。

前端登录逻辑 (示例)：

$.ajax({
  url: "http://localhost:8080/login",
  type: 'POST',
  data: formData, // 登录表单数据
  error: function(err) {
    console.log('登录失败！', err)
  },
  success: function(data) {
    console.log('登录成功！')
    localStorage.setItem('token', data.id_token); // 将 token 保存到 localStorage
  }
});

后端路由 (示例)：

app.get('/upload', jwt({secret: config.secret}), function(req, res) {
  // 验证 token 后，发送文件
  res.sendFile(path.join(__dirname + '/upload.html')); 
});

如何发送 Token

可以利用 jQuery 的 AJAX 方法中的 headers 属性来设置请求头，将 token 附加在 Authorization 头部中发送。

$.ajax({
  url: "http://localhost:8080/upload", 
  type: 'GET',
  headers: {
    "Authorization": "Bearer " + localStorage.getItem('token') 
  },
  success: function(data) {
    console.log('请求成功！', data);
    // 处理成功的响应
  },
  error: function(err) {
    console.log('请求失败！', err);
    // 处理错误，例如 token 过期，未授权等
  }
});

解释：

Authorization 头部：这是 HTTP 协议中用于传递认证信息的标准头部。
Bearer 认证方案：表明使用的是 bearer token 进行认证，这里指的是 JWT。
字符串拼接：使用 + 将字符串 “Bearer ” 和从 localStorage 中获取的 token 拼接在一起，形成完整的 Authorization 头部值。

场景

如何发送 Token

相关文章：

本文标签: