Question

我需要防止登录后网页返回登录页面

我正在尝试使用React和express创建一个网站。通过使用历史记录按“后退”按钮，我成功地阻止了我的网站返回登录页面。推送和生命周期方法，但是我担心任何人仍然可以通过在登录后将URL更改为“ http://localhost:3000/login”来访问登录页面。使用history.push（'/'）不能解决问题。如果有人可以提供有关此问题的任何提示，我将不胜感激。我在StackOverflow上能找到的所有关于该问题的都是PHP，而不是React。

Answer 1

您可以简单地将一个变量分配给保存身份验证令牌的本地存储。然后，您必须有条件地将其放入生命周期方法 componendDidMound 中，然后必须重定向所需的路由。检查以下代码

componentDidMount() {
    const user = localStorage.getItem('authToken') // your saved token in localstorage
    if (user && user !== 'undefined') {            // check for not undefined
        this.props.history.push('/')               // now you can redirect your desired route
    }
}

Answer 2

如果我对您的理解正确，则要阻止经过身份验证的用户访问登录页面，因为它们已通过身份验证。如果是这样，您可以在“登录”组件中执行以下操作。

authenticated

如果使用状态管理器，请确保将Boolean作为Alias /nonwordpress/ /absolute_path_on_server/htdocs/nonwordpress/道具传递给组件。如果没有状态管理器，则还可以对条件使用本地函数。

Answer 3

您可以使用 useEffect 钩子来解决此问题。

在您的登录页面组件内部：

useEffect(() => {
   let isAuth = localStorage.getItem('authToken')
   if(isAuth & isAuth !== 'undefined') {
      props.history.push('/')
   }
}, [])

IsAuth是一个变量，该变量根据存储在localStorage中的令牌返回true或false。
空数组显示useEffect仅在加载组件后运行。这意味着一旦用户登录并尝试进入'/ login'路线。 useEffect将立即运行并检查isAuth的值，如果用户已经登录，则isAuth将返回true并将其重定向到您可以说出的首页'/'。
如果isAuth返回false，则将显示登录页面。

使用这种方法，可以限制用户在身份验证后访问未经身份验证的路由。

Answer 4

如果您使用的是 react-router：

您需要在路由中执行此操作，而不是在登录组件内部执行此操作，这样您就不会看到登录页面“闪烁”。这适用于反应路由器 ^5.2.0。

import HomeComponent from './Home.js'
import LoginComponent from './Login.js' 

function App() {

...
  <Route path="/login" component={NotAuthenticated ? LoginComponent : HomeComponent} />
...

}

React-如何防止登录后返回登录页面？

4 个答案: