Question

我正在努力实现一些应该简单的事情：如果用户试图完全离开Web应用程序（来自fancywebapp.com - ＆gt; google.com），应该提示他们要离开网站。如果他们同意，它将继续导航并签署。这应该可以防止任何人返回到Web应用程序的受保护部分。

我尝试了一些不同的选项，包括<Prompt>，但他们做了一些我不希望他们做的事情：它们会在刷新时触发，并在Web应用程序中的路径之间导航时触发。这些都不可取。

我会很快发布我的代码，在我参加会议之前就把问题提出来。必须有一个简单的答案，因为这是非常标准的东西。

Answer 1

您可以在页面上添加事件侦听器，以提示用户离开页面/注销。

onBeforeUnload = event => {
    event.returnValue = "Your custom prompt message here" //Not all browsers will let you set a return value here and will provide a generic message prompt instead.
}

onUnload = event => { 
//Log out user logic here
}

componentDidMount = () => {
  window.addEventListener("beforeunload", this.onBeforeUnload)
  window.addEventListener("unload", this.onUnload)
}

componentWillUnmount = () => {
  window.removeEventListener("beforeunload", this.onBeforeUnload)
  window.removeEventListener("unload", this.onUnload)
}

提示用户在react-router-dom中远离Web应用程序的最简单方法

1 个答案: