如何使用JavaScript在跳转新页面时传递bearer authorization令牌

首先明确：浏览器默认的a标签跳转、location.href跳转都无法自定义请求头，所以无法直接在这类跳转中带入Authorization头，可选用以下三种方案适配：

方案1：拦截跳转事件，动态加载页面内容 #

适合单页应用（SPA）或支持动态渲染页面内容的场景：

• 给需要鉴权的站内跳转链接加上自定义标识，比如class="auth-required-link"
• 全局监听点击事件，拦截a标签默认跳转行为
• 用fetch或XMLHttpRequest发起请求，在请求头中带入Authorization: Bearer <你的令牌>
• 请求成功后将返回的HTML内容替换当前页面，同时用history.pushState修改浏览器地址栏，保证前进后退功能正常

示例代码：

document.addEventListener('click', function(e) {
  // 匹配带鉴权标识的a标签
  const authLink = e.target.closest('a.auth-required-link')
  if (!authLink) return
  e.preventDefault()
  const targetPath = authLink.getAttribute('href')
  // 从本地存储读取令牌，你也可以从会话存储等其他位置读取
  const token = localStorage.getItem('site_bearer_token')

  fetch(targetPath, {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  })
  .then(res => {
    if (res.status === 401) {
      // 鉴权失败直接跳登录页
      window.location.href = '/login'
      throw new Error('Unauthorized')
    }
    return res.text()
  })
  .then(pageHtml => {
    // 替换当前页面内容
    document.documentElement.innerHTML = pageHtml
    // 更新地址栏url
    window.history.pushState({ path: targetPath }, '', targetPath)
    // 可选：重新执行新页面内的脚本，保证功能正常
    document.querySelectorAll('script').forEach(oldScript => {
      const newScript = document.createElement('script')
      Array.from(oldScript.attributes).forEach(attr => {
        newScript.setAttribute(attr.name, attr.value)
      })
      newScript.textContent = oldScript.textContent
      oldScript.parentNode.replaceChild(newScript, oldScript)
    })
  })
  .catch(err => console.error('跳转失败:', err))
})

// 监听前进后退事件，适配页面切换
window.addEventListener('popstate', function(e) {
  if (e.state?.path) {
    // 重新发起带令牌的请求加载对应页面即可
  }
})

方案2：令牌存入Cookie，后端适配校验 #

同域站点优先选这个方案，前端改造成本最低：

• 登录成功后将bearer令牌存入设置了HttpOnly、Secure、SameSite属性的Cookie中
• 后端修改鉴权逻辑，优先从Cookie中读取令牌做校验，不需要前端传递Authorization头
• 浏览器发起所有站内请求（包括a标签跳转）时会自动携带Cookie，完全不用修改原有跳转逻辑
  优点：可以避免XSS攻击窃取令牌，不需要改任何前端跳转代码，稳定性最高

方案3：临时校验参数传递 #

如果前两种方案都无法落地，可以用一次性校验参数的方案：

• 拦截a标签点击事件，先生成一个有效期极短（建议10秒以内）的一次性校验码，将校验码和对应用户的令牌绑定存入后端缓存
• 把校验码作为查询参数拼到目标跳转链接后，直接触发浏览器默认跳转
• 目标页面的后端拿到查询参数中的校验码，和缓存对比校验通过后返回页面内容，同时立刻删除缓存中的校验码，避免被复用
  注意点：必须严格限制校验码的有效期和使用次数，避免出现令牌泄露风险

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