如何在 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中文網其他相關文章！