Cách chuyển hướng người dùng sau khi đăng nhập trong React
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 blog, chỉ những người dùng đã 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 ta 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à useNavigate () cái móc.
Mục Lục
Tạo một ứng dụng React
Tạo một ứng dụng React đơn giản bằng cách sử dụng tạo-phản ứng-ứng dụng yêu cầu. Bạn sẽ sử dụng ứng dụng này để kiểm tra cách thành phần Điều hướng và useNavigate () công việc móc.
npx create-react-app react-redirect
Tạo trang đăng nhập
Bạn sẽ cần tạo trang Đăng nhập để xác thực người dùng. Vì đây không phải là một hướng dẫn xác thực, hãy sử dụng một mảng các đối tượng làm cơ sở dữ liệu người dùng.
Tạo một tệp mới trong src thư mục và đặt tên cho nó Login.js. Sau đó thêm mã sau để tạo biểu mẫu đă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 (
<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;
Đâ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ọ, chúng 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 thật. Vì bạn sẽ kiểm tra xem người dùng có được xác thực trong thành phần Bảng điều khiển hay không, 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. Bài viết này sử dụng bộ nhớ cục bộ. Trong một ứng dụng thực, sử dụng React context sẽ là một lựa chọn tốt hơn.
Tạo trang tổng quan
Thêm mã sau vào một tệp mới có tên Dashboard.js.
const Dashboard = () => {
return (
<div>
<p>Welcome to your Dashboard</p>
</div>
);
};
export default Dashboard;
Chỉ những người dùng đã 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 dashboard, trước tiên hãy kiểm tra xem chúng có được xác thực hay không. 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 cách sử dụng bộ định tuyến React.
npm install react-router-dom
Trong index.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(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route index element={<App />} />
<Route path="login" element={<Login />} />
<Route path="dashboard" element={<Dashboard />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Bảo vệ Trang Bảng điều khiển
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 trang tổng quan ở 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ữ trong 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) {
} else {
return (
<div>
<p>Welcome to your Dashboard</p>
</div>
);
}
};
export default Dashboard;
Chuyển hướng người dùng đến Trang đăng nhập bằ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ừ react-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 <Navigate replace to="/login" />;
} else {
return (
<div>
<p>Welcome to your Dashboard</p>
</div>
);
}
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 một thành phần. Lưu ý rằng bạn không cần phải sử dụng từ khóa thay thế. Việc 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 đến một trang khác bằng useNavigate ()
Tùy chọn khác để thực hiện chuyển hướng trong React là useNavigate () cái móc. Móc này cung cấp quyền truy cập vào API bắt buộc điều hướng. Bắt đầu bằng cách nhập nó từ react-router-dom.
import { useNavigate } from "react-router-dom";
Chuyển hướng sau khi người dùng được xác thực thành công trong handleSubmit () chức năng 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 (
<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>
);
};
Trong ví dụ này, 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.
Khi tạo ứng dụng, một trong những mục tiêu là mang đến cho người dùng trải nghiệm tốt nhất. Bạn có thể làm điều này bằng cách đưa người dùng trở lại trang mà họ đã ở trước đó bằng cách chuyển hướng họ đến trang đăng nhập. Bạn có thể làm điều này bằng cách chuyển -1 để điều hướng như thế này, điều hướng (-1). Nó hoạt động giống như cách nhấn nút quay lại trên trình duyệt của bạn.
Định tuyến trong React
Trong bài viết này, bạn đã biết 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à useNavigate () cái móc. Bài viết đã sử dụng biểu mẫu Đăng nhập để trình bày 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ệ đến trang đăng nhập.