如何在 NodeJs 中的 API 获取请求成功时呈现到新的 HTML 页面？

Question

我想根据用户请求呈现一个新的 HTML 页面，该页面只有在 authorization 标头设置正确的情况下才能访问。我最初以为浏览器会重定向到该页面，但发现并非如此。我找到了一些方法来处理这个问题，例如替换 DOM，但我认为这不是一个好的解决方案。

这是来自 UI 的 fetch 调用，它返回 HTML，但当前不呈现它：

fetch('/protected_route', {
  headers: {
    'authorization': 'Bearer ' + sessionStorage.getItem('token')
  }
}).then(response => {
  // What to do with the response
});

这是服务器代码，如果有帮助的话：

app.get('/protected_route', (req, res) => {
  const bearer = req.headers['authorization'];

  if(typeof bearer === 'undefined') {
    res.json({message: 'Not logged in'});
  }
  else {
    const token = bearer.split(' ')[1];

    jwt.verify(token, config.secret, (error, data) => {
      if(error) {
        res.json({message: 'Error verifying token'});
      }
      else {
        res.render('protected_route');
      }
    });
  }
});

Answer 1

我发现解决它的唯一方法是使用 document.write(data)。此语句导致呈现接收到的页面但在同一个文档中，不会将浏览器窗口更改为新页面，并且不会在浏览器的历史记录中包含新的输入

Answer 2

您面临的问题是当您尝试打开一个新的 HTML 页面并通过 res.render() 发回一个 html 文件时，这会将 HTML 内容发送回请求。当通过 AJAX 或 fetch 或 request 或任何其他 API 客户端使用 API 调用时，它们是为单页应用程序开发的，这些调用禁止浏览器呈现到新的 html 页面。来自此类来源的 API 调用处理数据，浏览器无法控制收到的响应。

如果你需要渲染另一个 HTML 页面而不是使用 form-submit 调用 API，因为这是让浏览器响应响应并在新页面中显示响应的唯一方法。由于res.render()返回了HTML文件内容，因此一个新页面就像一个文件被打开了。

如果你想使用单页应用程序，那么你必须处理接收到的 HTML，然后用新的 HTML 替换整个加载的 HTML，如果需要使用一些 API 调用模块，你必须在 DOM 中进行更改。

您可以查看this github project，为初学者解释所有基本的前端和后端链接。