如何在 React Router 4 中实现身份验证？

在 React Router 4 中对路由进行身份验证

在 React Router 4 中，实现经过身份验证的路由需要与早期版本不同的方法。使用嵌套路由的传统方法是：和不再支持。

为了解决这个问题，我们可以使用自定义的 组件：

<code class="javascript">import React, {PropTypes} from "react";
import { Route } from "react-router-dom";

export default class AuthenticatedRoute extends React.Component {
  render() {
    if (!this.props.isLoggedIn) {
      this.props.redirectToLogin();
      return null;
    }

    return <Route {...this.props} />;
  }
}

AuthenticatedRoute.propTypes = {
  isLoggedIn: PropTypes.bool.isRequired,
  component: PropTypes.element,
  redirectToLogin: PropTypes.func.isRequired,
};</code>

此组件检查用户是否已登录，如果未登录，则将其重定向到登录页面。如果用户登录，它会照常呈现路线。

另一种方法是利用 。成分。这允许您根据给定条件有条件地重定向用户，例如身份验证状态：

<code class="javascript">function PrivateRoute({ component: Component, authed, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        authed === true ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } }}
          />
        )
      }
    />
  );
}</code>

此 ;组件允许您根据 authed 属性保护特定路由。如果用户通过身份验证，则可以访问该路由；否则，它们将被重定向到登录页面。

通过实施这些身份验证技术，您可以有效地保护 React Router 4 中的路由，并确保只有授权用户才能访问应用程序的特定部分。

以上是如何在 React Router 4 中实现身份验证？的详细内容。更多信息请关注PHP中文网其他相关文章！