Question

我的问题似乎很基本，但是在这个论坛上我遇到了很多文档和问题，而没有任何适当的方法来完成工作。

我有一个安全的Web应用程序，在该程序中，我以编程方式处理重定向，以随每个请求发送身份验证标头。因此，我没有按钮href，而是触发了以下功能的按钮：

route_accessor.mjs

const access = (path = '') => {
    const token = localStorage.getItem('anov_auth_token');
    const dest = `http://localhost:8080/${path}`;

    const headers = new Headers();
    if (token) headers.append('authorization', token);

    fetch(
        dest,
        {
            method: 'GET',
            headers,
            mode: 'cors',
            redirect: 'follow'
        }
    )
        .then(response => {
            if (response.url.includes('error/403')) {
               localStorage.removeItem('anov_auth_token');
            }

            // Here I need to redirect to the response page
        })
        .catch(error => {
            console.error(error);
        });
};

export default access;

然后，我有NodeJs后端，它可以决定我应该去哪里：

我请求的页面
403页（如果我发送了错误的令牌）
登录页面（如果我没有发送任何令牌）

到目前为止，后端可以完美运行。问题是，一旦我提出请求，我就无法按照自己的意愿显示结果。这是我尝试过的。以下代码发生在我在 route_accessor.mjs 中添加注释的地方。

使用window.location

window.location.href = response.url;

我尝试了每种变体，例如window.location.replace()，但总是遇到相同的问题：这些方法向所请求的url启动了第二个请求，而没有发送标头。因此，当服务器接受令牌时，我将陷入无限403重定向循环。

我尝试了以下帖子中列出的方法：redirect after fetch response

使用document.write（）

我发现的第二个可接受的答案是手动更新页面内容和位置。以下内容几乎达到了我想要的目的，但有一些缺陷：

response.text().then(htmlResponse => {
  document.open();
  document.write(htmlResponse);
  document.close();

  // This doesn't do what I want, event without the second argument
  window.document.dispatchEvent(new Event("DOMContentLoaded", {
    bubbles: true,
    cancelable: true
  }));
});

有了这个，我的观点得到了更新。但是，URL保持不变（我希望更改）。尽管加载了每个脚本，但我几乎没有DOMContentLoaded事件来使我的页面完全正常运行，但是根本不会触发它们。文件关闭后，我无法设法正确地调度新的DOMContentLoaded。

还有其他一些小问题，例如未清除控制台。

结论

我在这个问题上停留了相当长的时间，而我的所有研究都没有使我了解到我目前正在寻找的东西。也许我错过了重要的一点，但是无论如何...

我感到奇怪的是，程序重定向似乎很难实现，因为它对我来说几乎是基本的。这只涉及获取请求。

它们是否是使它们的行为像链接标签，只有一个href却带有其他标题的正确方法？我只能使用javascript来执行此操作吗？还是它们对它有限制？

在此先感谢您提供帮助！

使用JavaScript提取方法路由到URL

0 个答案: