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

Question

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

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

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

这是我的代码。我正在获得“成功”-Alert-所以一切似乎都运转正常。但我需要浏览器将结果显示为新页面（某种类型的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​​令牌调用url并在获取成功时打开它？

Answer 1

对于搜索解决方案的任何人：使用JavaScript或fetch API实际上是不可能的。对我来说，（最简单的）解决方案是将令牌保存在cookie中。然后，服务器在cookie中搜索令牌并将其用于身份验证/授权。这非常有效，我不需要在每个请求上发送令牌。

希望有所帮助。