Bagaimana untuk Melaksanakan Penghalaan Disahkan dalam Penghala Reaksi 4?

Penghalaan Disahkan dalam Penghala Reaksi 4

Laluan yang disahkan dalam Penghala Reaksi 4 memerlukan pendekatan yang berbeza daripada versi sebelumnya. React Router 4 tidak lagi menyokong laluan bersarang dengan prop komponen dan kanak-kanak, yang menjadikannya lebih mencabar untuk melaksanakan laluan yang disahkan.

Penyelesaian: Menggunakan Komponen Ubah Hala

Untuk melaksanakan disahkan laluan, anda boleh menggunakan komponen Ubah hala. Komponen Ubah hala mengubah hala pengguna ke laluan yang berbeza berdasarkan syarat yang diberikan.

Pertimbangkan komponen PrivateRoute berikut:

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

Komponen ini menjadikan komponen yang ditentukan jika pengguna disahkan (ditandakan === benar); jika tidak, ia mengubah hala pengguna ke halaman log masuk.

Penggunaan:

Kini, anda boleh menggunakan komponen PrivateRoute dalam laluan anda seperti ini:

<code class="javascript"><Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} /></code>

Dalam contoh ini, PrivateRoute untuk laluan papan pemuka akan mengubah hala pengguna yang tidak disahkan ke halaman log masuk.

Penyelesaian Ganti: Tindakan Penghantaran

Pendekatan lain, yang mungkin kurang diingini, adalah untuk menghantar tindakan dalam kaedah pemaparan komponen AuthenticatedRoute anda. Ini mungkin kelihatan seperti:

<code class="javascript">export default class AuthenticatedRoute extends React.Component {
  render() {
    if (!this.props.isLoggedIn) {
      this.props.redirectToLogin()
      return null
    }
    return <Route {...this.props} />
  }
}</code>

Pendekatan ini mencetuskan ubah hala ke halaman log masuk apabila pengguna tidak log masuk, tetapi ia mungkin berasa kurang elegan daripada menggunakan komponen Ubah hala.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Penghalaan Disahkan dalam Penghala Reaksi 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!