javascript - 使用 Fetch API 调用带有 Auth Token 的 URL

Question

我正在使用 Fetch API 通过 Baisc 身份验证登录到我的 Web 应用程序。成功登录后，服务器返回一个 token 作为 json 对象。然后我使用此 token 向其他 API 端点发出请求。如果请求包含有效 token ，这些端点只会显示一个网页。

一切正常，但在我使用 fetch API 成功调用后，浏览器中没有任何显示。

如果我在 REST 客户端中调用 API 端点，它会返回看起来没问题的 html。问题似乎是浏览器应该调用 url 而不是仅仅获取 html..

这是我的代码。我收到“成功”- 警报 - 所以一切似乎都正常。但我需要浏览器将结果显示为新页面(某种直接调用 header 中带有标记的 url)。

function login(event) {
  event.preventDefault();
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let url = URL + 'login';
  let headers = new Headers();
  headers.append('Authorization', 'Basic ' + btoa(username + ":" + password));
  fetch(url, {method:'GET',
          headers: headers,
         })
  .then(function(response)
  {
    if (response.ok) {
      return response.json();
    } else {
      let error = document.getElementById("login-error");
      error.innerHTML = "Username/Password incorrect.";
    }
  })
  .then(function(json)
  {
    if (typeof(json) !== "undefined") {
      startWebapp(json.token);
    }
  })
  .catch(error => console.error('Error:', error));
}

function startWebapp(token) {
  let url = URL + 'webapp/overview';
  let headers = new Headers();
  headers.append('Authorization', 'Bearer ' + token);
  fetch(url, {method:'GET',
headers: headers,
})
.then(function(response) {
  alert("Success!");
  return response;
});
}

如果获取成功，我如何实现浏览器实际调用带有 API token 的 url 并打开它？

Answer 1

对于任何正在寻找解决方案的人: 这对于 JavaScript 和 fetch API 实际上是不可能的。对我来说(最简单的)解决方案是将 token 保存在 cookie 中。然后服务器在 cookie 中搜索 token 并将其用于身份验证/授权。这非常有效，我不需要在每次请求时都发送 token 。

希望对您有所帮助。