Bagaimana untuk Melaksanakan Laluan Disahkan dengan Berkesan dalam React Router 4?

Melaksanakan Laluan Disahkan dalam React Router 4: Meneroka Pendekatan Berbeza

Dalam React Router 4, laluan yang disahkan menimbulkan cabaran kerana amaran terhadap menggunakan kedua-dua dan dalam laluan yang sama. Artikel ini meneroka pendekatan alternatif untuk melaksanakan laluan yang disahkan dengan cekap.

Satu kaedah melibatkan mencipta komponen AuthenticatedRoute tersuai yang menjadikan laluan hanya jika pengguna log masuk. Walau bagaimanapun, sesetengah pihak berpendapat bahawa menghantar tindakan dalam kaedah render terasa tidak konvensional.

Penyelesaian lain memanfaatkan komponen Ubah hala untuk mengubah hala pengguna yang tidak dibenarkan ke halaman log masuk. Dengan mencipta komponen PrivateRoute yang menjadikan komponen yang ditetapkan hanya jika pengguna disahkan, anda boleh memudahkan pelaksanaan.

Coretan kod berikut menunjukkan pendekatan PrivateRoute:

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

Dengan pendekatan ini , laluan anda boleh distrukturkan seperti berikut:

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

Dengan memahami metodologi berbeza ini, anda boleh melaksanakan laluan yang disahkan dengan berkesan dalam React Router 4, memastikan navigasi selamat dan terkawal dalam aplikasi anda.

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