Question

我正在尝试使用React Router为我的应用程序实现身份验证系统。但是我很难找到正确的方法来做到这一点。

export default class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      logged : false
    }

  }

  isUserConnected(){
    // Contact server to know if user is connected or not
  }

  render() {
    return (
        <Router>
          <Switch>
            <Route exact path="/" component={Homepage} />
            <Route path="/privatePart" component={Application} /> 
            <Route path="/login" component={LoginRedirection} />
            <Route component={NotFound} />
          </Switch> 
        </Router>
    )
  }
}

在LoginRedirection组件中，有一个登录表单，用于连接用户的POST。但是这个组件如何在App组件中设置为true？

也许我应该学习redux？使用它实现验证可能更简单吗？

Answer 1

Redux可能是一个解决方案，但您可以使用React和react-router来完成此操作。

使用react-router，您可以使用属性onEnter 。例如，您可以仅使用以下内容访问已登录用户的privatePart URL：

  <Route path="/privatePart" component={Application} onEnter={requireAuth}/>

requireAuth应该是一个检查用户是否已登录的函数。我认为使用App的状态不是最好的方法，因为如果重新加载Web，该信息将丢失。当POST在Login组件中返回OK时，您可以在 localStorage 中存储登录标记或仅标记。然后，将用户重定向到privatePart，只有requireAuth返回true（检查localStorage），他才能访问它。它可能是这样的：

if (localStorage.getItem("logged") === null) {
    return false;
} else {
    return true;
}

其中，用户名是登录成功后添加到localStorage的密钥。

React Router 4验证和重定向

1 个答案: