Cara redirect ke halaman lain setelah berhasil login di javascript

Biasanya, saat membangun aplikasi web, halaman login digunakan untuk melindungi halaman pribadi. Misalnya, untuk platform blog, dasbor hanya dapat diakses oleh pengguna yang diautentikasi. Jika pengguna yang tidak diautentikasi mencoba mengakses halaman tersebut, aplikasi akan mengarahkan mereka ke halaman login. Setelah mereka masuk, mereka mendapatkan akses

Pada artikel ini, kita akan melihat bagaimana Anda dapat mengalihkan pengguna dari halaman yang dibatasi ke halaman login. Kami juga akan membahas bagaimana Anda dapat mengembalikan pengguna ke halaman mereka setelah masuk

Di React Router v6, ada dua cara yang dapat Anda gunakan untuk mengarahkan ulang pengguna — komponen Navigate dan hook useNavigate()

Buat Aplikasi Bereaksi

Buat aplikasi React sederhana menggunakan perintah create-react-app. Anda akan menggunakan aplikasi ini untuk menguji cara kerja komponen Navigate dan hook useNavigate()

 npx create-react-app react-redirect
 

Buat Halaman Masuk

Anda harus membuat halaman Login untuk mengautentikasi pengguna. Karena ini bukan tutorial autentikasi, gunakan array objek sebagai basis data pengguna

Buat file baru di folder src dan beri nama Login. js. Kemudian tambahkan kode berikut, untuk membuat form login

 import { useState } from "react";
import Dashboard from "./Dashboard";

const Login = () => {
  const [username, setusername] = useState("");
  const [password, setpassword] = useState("");
  const [authenticated, setauthenticated] = useState(localStorage.getItem(localStorage.getItem("authenticated")|| false));
  const users = [{ username: "Jane", password: "testpassword" }];
  const handleSubmit = (e) => {
    e.preventDefault()
    const account = users.find((user) => user.username === username);
    if (account && account.password === password) {
        setauthenticated(true)
        localStorage.setItem("authenticated", true);
    }
  };
  return (
    <div>
      <p>Welcome Back</p>
      <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="Username"
        value={username}
        onChange={(e) => setusername(e.target.value)}
      />
      <input
        type="password"
        name="Password"
        onChange={(e) => setpassword(e.target.value)}
      />
      <input type="submit" value="Submit" />
      </form>
    </div>
  )
};
}

export default Login;
 

Ini adalah formulir login sederhana. Saat pengguna mengirimkan nama pengguna dan kata sandinya, mereka diperiksa terhadap array. Jika detail ini benar, status autentikasi disetel ke true. Karena Anda akan memeriksa apakah pengguna diautentikasi di komponen Dasbor, Anda juga perlu menyimpan status autentikasi di suatu tempat yang dapat diakses oleh komponen lain. Artikel ini menggunakan penyimpanan lokal. Dalam aplikasi nyata, menggunakan konteks React akan menjadi pilihan yang lebih baik

Buat Halaman Dasbor

Tambahkan kode berikut dalam file baru bernama Dashboard. js

 const Dashboard = () => {
  return (
    <div>
      <p>Welcome to your Dashboard</p>
    </div>
  );
};
export default Dashboard;
 

Dasbor seharusnya hanya dapat diakses oleh pengguna yang diautentikasi saja. Oleh karena itu, saat pengguna mengunjungi halaman dasbor, periksa terlebih dahulu apakah sudah diautentikasi. Jika tidak, arahkan mereka ke halaman login

Untuk melakukannya, atur rute aplikasi terlebih dahulu menggunakan router React

 npm install react-router-dom
 

Dalam indeks. js, atur perutean untuk aplikasi Anda

 import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route index element={<App />} />
        <Route path="login" element={<Login />} />
        <Route path="dashboard" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);
 

Lindungi Halaman Dasbor

Sekarang rute aplikasi Anda sudah diatur, langkah selanjutnya adalah menjadikan rute dasbor pribadi. Saat komponen Dasbor dimuat, status autentikasi diambil dari penyimpanan lokal dan disimpan dalam status. Jika pengguna tidak diautentikasi, aplikasi akan dialihkan ke halaman login jika tidak maka akan menampilkan halaman dashboard

 import { useEffect, useState } from "react";

const Dashboard = () => {
  const [authenticated, setauthenticated] = useState(null);
  useEffect(() => {
    const loggedInUser = localStorage.getItem("authenticated");
    if (loggedInUser) {
      setauthenticated(loggedInUser);
    }
  }, []);

  if (!authenticated) {
  // Redirect
  } else {
    return (
      <div>
        <p>Welcome to your Dashboard</p>
      </div>
    );
  }
};

export default Dashboard;
 

Arahkan Pengguna ke Halaman Login Menggunakan Navigasi

Komponen Navigate menggantikan komponen Redirect yang digunakan di React Router v5. Impor Navigasi dari react-router-dom

 import { Navigate } from "react-router-dom";
 

Untuk mengarahkan ulang pengguna yang tidak diautentikasi, gunakan sebagai berikut

 if (!authenticated) {
  return <Navigate replace to="/login" />;
} else {
  return (
    <div>
      <p>Welcome to your Dashboard</p>
    </div>
  );
}

 

Komponen Navigate adalah API deklaratif. Itu bergantung pada peristiwa pengguna, yang dalam hal ini adalah otentikasi menyebabkan perubahan negara dan akibatnya menyebabkan komponen merender ulang. Perhatikan bahwa Anda tidak harus menggunakan kata kunci ganti. Menggunakannya menggantikan URL saat ini alih-alih mendorongnya ke riwayat browser

Arahkan Pengguna ke Halaman Lain Menggunakan useNavigate()

Opsi lain untuk melakukan redirect di React adalah useNavigate() hook. Pengait ini menyediakan akses ke API imperatif navigasi. Mulailah dengan mengimpornya dari react-router-dom

 import { useNavigate } from "react-router-dom";
 

Arahkan ulang setelah pengguna berhasil diautentikasi dalam fungsi handleSubmit() seperti ini

 const navigate = useNavigate();
const Login = () => {
  const navigate = useNavigate();
  const [username, setusername] = useState("");
  const [password, setpassword] = useState("");
  const [authenticated, setauthenticated] = useState(
    localStorage.getItem(localStorage.getItem("authenticated") || false)
  );
  const users = [{ username: "Jane", password: "testpassword" }];
  const handleSubmit = (e) => {
    e.preventDefault();
    const account = users.find((user) => user.username === username);
    if (account && account.password === password) {
      localStorage.setItem("authenticated", true);
      navigate("/dashboard");
    }
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
 <input
 type="text"
 name="Username"
 value={username}
 onChange={(e) => setusername(e.target.value)}
 />
 <input
 type="password"
 name="Password"
 onChange={(e) => setpassword(e.target.value)}
 />
 <input type="submit" value="Submit" />
 </form>
    </div>
  );
};
 

Dalam contoh ini, setelah pengguna mengirimkan formulir dengan detail yang benar, mereka dialihkan ke dasbor

Routing di Bereaksi

Dalam artikel ini, Anda mempelajari cara mengarahkan pengguna ke halaman lain di React menggunakan komponen Navigate dan hook useNavigate(). Artikel tersebut menggunakan formulir Login untuk mendemonstrasikan bagaimana Anda dapat mengalihkan pengguna yang tidak diautentikasi dari halaman yang dilindungi ke halaman login

Bagaimana cara mengarahkan halaman setelah login berhasil?

Bagaimana cara mengarahkan ulang ke halaman lain setelah berhasil masuk dalam HTML?

Bagaimana cara mengarahkan ulang ke halaman lain dari js?

Bagaimana cara mengarahkan ulang ke halaman lain dalam JavaScript setelah pesan peringatan?

Bagaimana cara mengalihkan ke halaman lain saat tombol login diklik?