Làm cách nào để chuyển hướng đến một trang khác sau khi đăng nhập thành công bằng JavaScript?

Thông thường, khi xây dựng các ứng dụng web, các trang đăng nhập được sử dụng để bảo vệ các trang riêng tư. Ví dụ: đối với nền tảng viết blog, chỉ người dùng được xác thực mới có thể truy cập trang tổng quan. Nếu người dùng chưa được xác thực cố gắng truy cập trang đó, ứng dụng sẽ chuyển hướng họ đến trang đăng nhập. Khi họ đã đăng nhập, họ có quyền truy cập

Trong bài viết này, chúng tôi sẽ xem xét cách bạn có thể chuyển hướng người dùng từ trang bị hạn chế sang trang đăng nhập. Chúng tôi cũng sẽ thảo luận về cách bạn có thể đưa người dùng trở lại trang họ đã truy cập sau khi đăng nhập

Trong React Router v6, có hai cách bạn có thể sử dụng để chuyển hướng người dùng — thành phần Điều hướng và hook useNavigate[]

Tạo một ứng dụng phản ứng

Tạo một ứng dụng React đơn giản bằng lệnh tạo ứng dụng phản ứng. Bạn sẽ sử dụng ứng dụng này để kiểm tra cách hoạt động của thành phần Điều hướng và hook useNavigate[]

 npx create-react-app react-redirect
 

Tạo một trang đăng nhập

Bạn sẽ cần tạo một trang Đăng nhập để xác thực người dùng. Vì đây không phải là hướng dẫn xác thực, hãy sử dụng một mảng đối tượng làm cơ sở dữ liệu người dùng

Tạo một tệp mới trong thư mục src và đặt tên là Đăng nhập. js. Sau đó thêm đoạn mã sau để tạo form đăng nhập

 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 [
    
      Welcome Back
      
       setusername[e.target.value]}
      />
       setpassword[e.target.value]}
      />
      
      
    
  ]
};
}

export default Login;
 

Đây là một hình thức đăng nhập đơn giản. Khi người dùng gửi tên người dùng và mật khẩu của họ, họ sẽ được kiểm tra đối với mảng. Nếu những chi tiết này là chính xác, trạng thái xác thực được đặt thành true. Vì bạn sẽ kiểm tra xem người dùng có được xác thực trong thành phần Trang tổng quan hay không, nên bạn cũng cần lưu trữ trạng thái xác thực ở đâu đó mà các thành phần khác có thể truy cập được. Bài viết này sử dụng bộ nhớ cục bộ. Trong một ứng dụng thực tế, sử dụng ngữ cảnh React sẽ là lựa chọn tốt hơn

Tạo một trang bảng điều khiển

Thêm đoạn mã sau vào một tệp mới có tên là Bảng điều khiển. js

 const Dashboard = [] => {
  return [
    
      Welcome to your Dashboard
    
  ];
};
export default Dashboard;
 

Chỉ những người dùng được xác thực mới có thể truy cập trang tổng quan. Do đó, khi người dùng truy cập trang tổng quan, trước tiên hãy kiểm tra xem họ đã được xác thực chưa. Nếu không, hãy chuyển hướng họ đến trang đăng nhập

Để thực hiện việc này, trước tiên hãy thiết lập các tuyến ứng dụng bằng bộ định tuyến React

 npm install react-router-dom
 

trong chỉ mục. js, hãy thiết lập định tuyến cho ứng dụng của bạn

 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[
  
    
      
        
        
        
      
    
  
];
 

Bảo vệ Trang tổng quan

Bây giờ các tuyến ứng dụng của bạn đã được thiết lập, bước tiếp theo là đặt tuyến bảng điều khiển ở chế độ riêng tư. Khi thành phần Bảng điều khiển tải, trạng thái xác thực được truy xuất từ ​​bộ nhớ cục bộ và được lưu trữ ở trạng thái. Nếu người dùng không được xác thực, ứng dụng sẽ chuyển hướng đến trang đăng nhập nếu không nó sẽ hiển thị trang bảng điều khiển

 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 [
      
        Welcome to your Dashboard
      
    ];
  }
};

export default Dashboard;
 

Chuyển hướng người dùng đến trang đăng nhập bằng cách sử dụng Điều hướng

Thành phần Điều hướng đã thay thế thành phần Chuyển hướng được sử dụng trong React Router v5. Nhập Điều hướng từ Reac-router-dom

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

Để chuyển hướng người dùng chưa được xác thực, hãy sử dụng nó như sau

 if [!authenticated] {
  return ;
} else {
  return [
    
      Welcome to your Dashboard
    
  ];
}

 

Thành phần Điều hướng là một API khai báo. Nó dựa trên một sự kiện người dùng, trong trường hợp này là xác thực để gây ra thay đổi trạng thái và do đó gây ra kết xuất lại thành phần. Lưu ý rằng bạn không phải sử dụng từ khóa thay thế. Sử dụng nó sẽ thay thế URL hiện tại thay vì đẩy nó vào lịch sử của trình duyệt

Chuyển hướng người dùng sang trang khác bằng cách sử dụng useNavigate[]

Tùy chọn khác để thực hiện chuyển hướng trong React là hook useNavigate[]. Móc này cung cấp quyền truy cập vào API mệnh lệnh điều hướng. Bắt đầu bằng cách nhập nó từ Reac-router-dom

Chuyển hướng sau khi người dùng được xác thực thành công trong hàm handleSubmit[] như thế này

 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 [
    
      
  setusername[e.target.value]}
 />
  setpassword[e.target.value]}
 />
 
 
    
  ];
};
 

Trong ví dụ này, sau khi người dùng gửi biểu mẫu với các chi tiết chính xác, họ sẽ được chuyển hướng đến trang tổng quan

Định tuyến trong React

Trong bài viết này, bạn đã học cách chuyển hướng người dùng đến một trang khác trong React bằng cách sử dụng cả thành phần Điều hướng và hook useNavigate[]. Bài viết đã sử dụng biểu mẫu Đăng nhập để minh họa cách bạn có thể chuyển hướng người dùng chưa được xác thực từ trang được bảo vệ sang trang đăng nhập

Làm cách nào để chuyển hướng đến URL sau khi đăng nhập JavaScript?

Làm cách nào để chuyển hướng đến một trang khác khi nhấp vào nút đăng nhập?

Làm cách nào để chuyển hướng đến một trang khác sau khi gửi biểu mẫu bằng JavaScript?