Bagaimana untuk Melaksanakan Pengesahan dalam React Router 4?

Mengesahkan Laluan dalam React Router 4

Dalam React Router 4, melaksanakan laluan yang disahkan memerlukan pendekatan yang berbeza daripada versi terdahulu. Kaedah tradisional menggunakan laluan bersarang dengan dan tidak lagi disokong.

Untuk menangani isu ini, kami boleh menggunakan komponen:

<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>

Komponen ini menyemak sama ada pengguna telah log masuk dan mengubah hala mereka ke halaman log masuk jika tidak. Jika pengguna dilog masuk, ia menjadikan laluan seperti biasa.

Pendekatan lain ialah menggunakan komponen. Ini membolehkan anda mengubah hala pengguna secara bersyarat berdasarkan syarat tertentu, seperti status pengesahan:

<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>

Ini komponen membolehkan anda melindungi laluan tertentu berdasarkan prop yang disahkan. Jika pengguna disahkan, mereka boleh mengakses laluan; jika tidak, ia akan diubah hala ke halaman log masuk.

Dengan melaksanakan teknik pengesahan ini, anda boleh melindungi laluan dengan berkesan dalam React Router 4 dan memastikan bahawa hanya pengguna yang dibenarkan mempunyai akses kepada bahagian tertentu aplikasi anda.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pengesahan dalam React Router 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!