JavaScript如何提取当前页面URL中的token并传入AJAX API请求参数

实现步骤 #

1. 页面加载时提取URL中的token参数

使用浏览器原生的URLSearchParams接口直接解析查询字符串，代码示例：

// 页面加载完成后立即获取token
let requestToken = null
window.addEventListener('load', () => {
  const searchParams = new URLSearchParams(window.location.search)
  requestToken = searchParams.get('token')
  // 异常处理：token不存在时可跳转登录页或提示无权限
  if (!requestToken) {
    alert('身份凭证缺失，请重新进入')
    // window.location.href = '你的登录页地址'
  }
})

如果需要兼容低版本IE，也可以手动正则匹配提取：

function getTokenFromUrl() {
  const match = window.location.search.match(/token=([^&]+)/)
  return match ? match[1] : null
}
const requestToken = getTokenFromUrl()

2. 点击按钮发起AJAX请求时携带token

通常认证类参数推荐放在请求头Authorization中传递，更符合接口规范，也可以根据后端要求放在请求体参数里。

原生XMLHttpRequest示例：

document.querySelector('#submitBtn').addEventListener('click', () => {
  if (!requestToken) return
  const xhr = new XMLHttpRequest()
  xhr.open('POST', 'http://test2.com/你的接口路径', true)
  // 方式1：放在请求头
  xhr.setRequestHeader('Authorization', `Bearer ${requestToken}`)
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('请求成功', JSON.parse(xhr.responseText))
    }
  }
  // 方式2：放在请求体参数，注释掉上面的请求头配置即可使用
  // const postData = JSON.stringify({token: requestToken, 其他参数: 'xxx'})
  // xhr.send(postData)
  xhr.send(JSON.stringify({其他参数: 'xxx'}))
})

jQuery AJAX示例：

$('#submitBtn').click(function() {
  if (!requestToken) return
  $.ajax({
    url: 'http://test2.com/你的接口路径',
    type: 'POST',
    // 方式1：放在请求头
    headers: {
      'Authorization': `Bearer ${requestToken}`
    },
    contentType: 'application/json;charset=UTF-8',
    data: JSON.stringify({其他参数: 'xxx'}),
    // 方式2：放在请求参数，注释掉headers配置，把token放到data里即可
    // data: JSON.stringify({token: requestToken, 其他参数: 'xxx'}),
    success: function(res) {
      console.log('请求成功', res)
    }
  })
})

注意事项 #

• 如果跨域请求时使用了自定义的Authorization请求头，需要后端接口配置CORS规则允许该请求头，否则会触发预检请求失败
• 不要把token随意存储在localStorage/sessionStorage中，避免XSS攻击导致凭证泄露，本场景直接使用内存变量存储即可满足需求
• 如果你的token是JWT格式，可以在前端先做有效期校验，避免无效请求发送到后端

内容的提问来源于stack exchange，提问作者Jonathan Hagen