拦截链接后单击导航以添加授权标题

Question

我正在尝试将Firebase身份验证添加到传统的服务器呈现/多页面网站。假设已经登录的用户单击指向页面的链接，我需要在该页面上验证其在服务器上的身份验证凭据。为此，我需要向相应的http请求添加自定义授权标头，其中包含从Firebase Auth获得的ID令牌（对吗？）。因此，我拦截了anchor元素上的click事件，并在回调中将包含适当授权标头的新请求合并到一起：

link = document.getElementById("protected-link")

firebase.auth().onAuthStateChanged(function (user) {
  if (user) {
    firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(
      function (idToken) {
        link.addEventListener("click", function (event) {
          event.preventDefault();
          let xhr = new XMLHttpRequest()
          xhr.open("GET", link.href)
          xhr.setRequestHeader("Authorization", `Bearer ${idToken}`)
          xhr.send()
        })
      }).catch(function (error) {
        /* whatever */
      });
  } else {
    /* redirect to sign in page */
  }
});

这会将请求发送到服务器，服务器将根据需要进行响应，但是浏览器无法导航到新的URL link.href。我想念的最后一步是什么？