阻止用户在离开后返回 React 应用程序答案

【问题标题】：Prevent the user to go back to the React app after he leaves it阻止用户在离开后返回 React 应用程序
【发布时间】：2021-10-04 17:05:44
【问题描述】：

我有一个非常简单的React 应用程序：

我有 3 个反应页面：{Page1、Page2、Page3} 和 1 个 html 页面：{external.html}。

我想按以下方式流动：

Page1 → Page2 → Page3 → external.html

具有特殊性，一旦用户离开Page3 并到达external.html，他就根本无法回到React 应用程序。

请记住，我无法控制：external.html（第三方网站）。

离开Page3时有什么办法可以完全禁用后退按钮和/或历史记录？

如果您对此有任何方法，请随时 fork 上面的项目并将新链接粘贴到此处。

谢谢！

【问题讨论】：

我可能会使用 localStorage 之类的东西来跟踪某人何时完成。然后，在索引文件中渲染应用程序之前，检查是否设置了本地存储键。如果已设置，则重定向到外部页面

【解决方案1】：

有不同的处理方式-

在您的page3.jsx -> goToLink 中

您可以使用window.location.replace('external.html') 但这只会阻止用户返回 page3，它仍然允许返回 page2，依此类推。
您可以使用window.open('external.html') 打开您的external.html，但在这种情况下，您需要想办法以某种方式关闭当前选项卡。您可以尝试使用window.close()，但这通常会给出此错误/警告Scripts may close only the windows that were opened by them.

【讨论】：

【解决方案2】：

似乎授权您的用户访问页面 1、2 和 3。无论如何，您都需要以某种方式跟踪他们的会话。你怎么知道什么时候打电话给window.location.replace？

您如何知道关闭浏览器并操纵其本地存储或发送一些人为的请求以使他们再次访问您的页面的同一个人、不同的人或同一个人。如果正在进行授权/身份验证，则 100% 需要某种类型的会话跟踪。

我认为最好的方法是使用 JWT。要求第 1、2 和 3 页的 JWT，然后在最后一页离开时将其过期/删除（也将其设置在较短的过期计时器上）。

您不需要用户登录或任何繁重的工作，只需在您认为他们有权查看页面并要求访问时向他们发送 JWT cookie。

【讨论】：