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

2022-01-20 00:00:00 node.js express fetch javascript html

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

I want to render a new HTML page on user request, which is only accessible if the authorization header is set correctly. I initially thought that the browser would redirect to the page, but found out that this is not the case. I have found some ways to handle this, for example replacing the DOM, but I don't think that is a good solution.

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

Here is the fetch call from UI, which returns the HTML, but does not render it currently:

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

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

Here is the server code, if that helps:

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');
      }
    });
  }
});

推荐答案

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

The problem you are facing is when you tried to open a new HTML page and send back an html file via res.render(), this will send HTML content back to request. When using API call via AJAX or fetch or request or any other API client they are developed for single page application and these calls prohibits browser from rendering to new html page. API calls from such sources process over data and browser have no control over response received.

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

If you need to render another HTML page than use form-submit to call API, as this is the only way that let browser act upon response, and display response in new page. Since res.render() returned HTML file content, thus a new page act like a file is opened.

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

If you want to use single page application then you had to process over HTML received in response and then replace whole loaded HTML with new one, you had to make changes in DOM if need to use some API call module.

您可以查看 这个 github 项目 解释所有基本的前端和后端链接对于初学者.

You can check this github project explaining all basic front-end and backend links for starters.

相关文章