Question

我正在使用 Firebase 设置 React 应用的身份验证。我想确保的一件事是，经过身份验证的用户无法返回到login页。

最终，我认为可以通过添加条件来将用户重定向到/home并访问/login页面来完成此操作，如果用户未通过身份验证则看到{{1 }}类似于

loginForm

const LoginPage = () => <AuthUserContext.Consumer> {authUser => authUser ? <NavigationAuth /> : <NavigationNonAuth /> } </AuthUserContext.Consumer>已在工作，并确定用户是否已通过身份验证-可行，而不是我的问题。

接下来，如果用户未通过身份验证，他们将得到

<AuthUserContext.Consumer>

，如果它们被认证，他们将会得到

const NavigationNonAuth = () =>
<NonAuthStyle>
  <LoginForm/>
</NonAuthStyle>

希望这很有意义，但是我的问题是我如何在const NavigationAuth = () => <AuthStyle> // What goes here to this.props.history.push("/home") </AuthStyle>内创建一个事件以自动/强制将用户重定向到NavigationAuth？

Answer 1

您是否考虑过将react-router用于您的项目，因为这使您可以使用其某些组件来放置路由并使用重定向？

这是一些简单路由并使用自定义PrivateRoute组件的示例，该组件负责显示是否通过身份验证的路由。您需要将其放置在您的主应用程序组件中。

<BrowserRouter>
  <Switch>
    <Route path="/login" component={NavigationNonAuth} />
    <Route exact path="/" component={Home} />
    <PrivateRoute path="/auth" component={NavigationAuth} />
  </Switch>
<BrowserRouter/>

PrivateRoute组件检查用户是否已登录。如果未登录，它将通过从React Router渲染<Redirect>组件将用户引导回到登录路径，否则它将渲染提供的组件。在这种情况下NavigationAuth

这是一个有效的示例，可让您了解所有操作。（https://codesandbox.io/s/k5j8wm401v）

另外，为了更好地了解React Router v4及其组件，我发现本文非常有帮助。（https://css-tricks.com/react-router-4）

使用组件

1 个答案: