Cách tạo một lộ trình được bảo vệ trong React
Các tuyến được bảo vệ là những tuyến chỉ cấp quyền truy cập cho những người dùng được ủy quyền. Điều này có nghĩa là người dùng trước tiên phải đáp ứng các điều kiện nhất định trước khi truy cập vào tuyến đường cụ thể đó. Ví dụ: ứng dụng của bạn có thể yêu cầu chỉ những người dùng đã đăng nhập mới có thể truy cập trang tổng quan.
Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo các tuyến được bảo vệ trong ứng dụng React.
Lưu ý rằng bạn sẽ sử dụng React Router v6, có một chút khác biệt so với các phiên bản trước.
Mục Lục
Bắt đầu
Để bắt đầu, hãy sử dụng create-react-app để khởi động một ứng dụng React đơn giản.
npx create-react-app protect-routes-reactĐiều hướng đến thư mục vừa được tạo và khởi động ứng dụng của bạn.
cd protect-routes-react
npm startMở thư mục ứng dụng của bạn bằng trình soạn thảo văn bản ưa thích của bạn và dọn dẹp nó. Của bạn app.js nên trông như thế này.
function App() {
return <div></div>;
}
export default App;Bây giờ bạn đã sẵn sàng để thiết lập các tuyến đường.
Thiết lập Bộ định tuyến React
Bạn sẽ sử dụng React Router để thiết lập điều hướng cho ứng dụng của mình.
Cài đặt react-router-dom.
npm install react-router-domĐối với ứng dụng này, bạn sẽ có ba trang chính:
- Trang chủ (trang đích).
- Trang hồ sơ (được bảo vệ, vì vậy chỉ người dùng đã đăng nhập mới có quyền truy cập).
- Trang giới thiệu (công khai để ai cũng có thể truy cập).
Ở trong Navbar.jssử dụng Liên kết thành phần từ react-router-dom để tạo các liên kết điều hướng đến các đường dẫn khác nhau.
const { Link } = require("react-router-dom");
const Navbar = () => {
return (
<nav style={{ textAlign: "center", marginTop: "20px" }}>
<Link to="/" style={{ padding: "10px" }}>
Home
</Link>
<Link to="/profile" style={{ padding: "10px" }}>
Profile
</Link>
<Link to="/about" style={{ padding: "10px" }}>
About
</Link>
</nav>
);
};
export default Navbar;
Ở trong app.js tạo các tuyến đường phù hợp với các liên kết trong menu điều hướng.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./Navbar";
import Home from "./Home";
import Profile from "./Profile";
import About from "./About";
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;Bây giờ bạn cần tạo các thành phần mà bạn đã tham chiếu MỘTpp.js.
Ở trong Home.js:
const Home = () => {
return <h1>Home page</h1>;
};
export default Home;
Ở trong Profile.js
const Profile = () => {
return <h1 style={{ textAlign: "center" }}>Profile Page</h1>;
};
export default Profile;Ở trong About.js
const About = () => {
return <h1 style={{ textAlign: "center" }}>About page</h1>;
};
export default About;Tạo các tuyến được bảo vệ trong React
Tiếp theo là tạo các tuyến đường được bảo vệ. Các Trang Chủ và xung quanh các tuyến là công khai có nghĩa là bất kỳ ai cũng có thể truy cập chúng, nhưng tuyến hồ sơ yêu cầu người dùng phải được xác thực trước. Do đó, bạn cần tạo cách đăng nhập người dùng.
Thiết lập xác thực giả
Vì đây không phải là hướng dẫn xác thực nên bạn sẽ sử dụng hook của React useState để mô phỏng hệ thống đăng nhập.
Ở trong MỘTpp.jsthêm những điều sau.
import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
// Other import stamements
function App() {
const [isLoggedIn, setisLoggedIn] = useState(null);
const logIn = () => {
setisLoggedIn(true);
};
const logOut = () => {
setisLoggedIn(false);
};
return (
<BrowserRouter>
<Navbar />
{isLoggedIn ? (
<button onClick={logOut}>Logout</button>
) : (
<button onClick={logIn}>Login</button>
)}
<Routes>
</Routes>
</BrowserRouter>
);
}
export default App;
Tại đây, bạn đang theo dõi trạng thái đăng nhập của người dùng đang sử dụng trạng thái. Bạn có hai nút, nút đăng nhập và nút đăng xuất. Các nút này được hiển thị lần lượt tùy thuộc vào việc người dùng có đăng nhập hay không.
Nếu người dùng đã đăng xuất, nút đăng nhập sẽ hiển thị. Nhấp vào nó sẽ kích hoạt chức năng đăng nhập sẽ cập nhật isLoggedIn trạng thái thành true và lần lượt hiển thị từ khi đăng nhập đến nút đăng xuất.
Bảo vệ các thành phần riêng tư
Để bảo vệ các tuyến đường, các thành phần riêng tư cũng phải có quyền truy cập vào isLoggedIn giá trị. Bạn có thể làm điều này bằng cách tạo một thành phần mới chấp nhận isLoggedIn trạng thái như một chỗ dựa và thành phần riêng tư khi còn nhỏ.
Ví dụ: nếu thành phần mới của bạn có tên “Được bảo vệ”, bạn sẽ hiển thị một thành phần riêng tư như thế này.
<Protected isLoggedIn={isLoggedIn}>
<Private/>
</Protected>Thành phần được bảo vệ sẽ kiểm tra xem isLoggedIn là đúng hay sai. Nếu đúng, nó sẽ tiếp tục và trả về thành phần Riêng tư. Nếu sai, nó sẽ chuyển hướng người dùng đến một trang nơi họ có thể đăng nhập.
Tìm hiểu thêm về các cách khác mà bạn có thể sử dụng để kết xuất một thành phần tùy thuộc vào điều kiện từ bài viết này về kết xuất có điều kiện trong React.
Trong ứng dụng của bạn, hãy tạo Protected.js.
import { Navigate } from "react-router-dom";
const Protected = ({ isLoggedIn, children }) => {
if (!isLoggedIn) {
return <Navigate to="/" replace />;
}
return children;
};
export default Protected;Trong thành phần này, câu lệnh if được sử dụng để kiểm tra xem người dùng có được xác thực hay không. Nếu không, Điều hướng từ react-router-dom chuyển hướng chúng đến trang chủ. Tuy nhiên, nếu người dùng được xác thực, thành phần con sẽ được hiển thị.
Sử dụng Protected.js trong MỘTpp.js sửa đổi Hồ sơ tuyến trang.
<Route
path="/profile"
element={
<Protected isLoggedIn={isLoggedIn}>
<Profile />
</Protected>
}
/>App.js nên trông như thế này.
import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
import Navbar from "./Navbar";
import Protected from "./Protected";
import Home from "./Home";
import About from "./About";
import Profile from "./Profile";
function App() {
const [isLoggedIn, setisLoggedIn] = useState(null);
const logIn = () => {
setisLoggedIn(true);
};
const logOut = () => {
setisLoggedIn(false);
};
return (
<BrowserRouter>
<div>
<Navbar />
{isLoggedIn ? (
<button onClick={logOut}>Logout</button>
) : (
<button onClick={logIn}>Login</button>
)}
<Routes>
<Route path='/' element={<Home />} />
<Route path='/profile'
element={
<Protected isLoggedIn={isLoggedIn}>
<Profile />
</Protected>
}
/>
<Route path ='/about' element={<About />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
Đó là việc tạo các tuyến đường được bảo vệ. Bây giờ bạn chỉ có thể truy cập trang Hồ sơ nếu bạn đã đăng nhập. Nếu bạn cố gắng điều hướng đến trang Hồ sơ mà không đăng nhập, bạn sẽ được chuyển hướng đến trang chủ.
Kiểm soát truy cập dựa trên vai trò
Hướng dẫn này đã chỉ cho bạn cách bạn có thể hạn chế người dùng chưa được xác thực truy cập vào một trang trong ứng dụng React. Trong một số trường hợp, bạn có thể cần phải đi xa hơn nữa và hạn chế người dùng dựa trên vai trò của họ. Ví dụ: bạn có thể có một trang nói rằng trang phân tích chỉ cấp quyền truy cập cho quản trị viên. Ở đây, bạn sẽ cần thêm logic trong thành phần được bảo vệ để kiểm tra xem người dùng có đáp ứng các điều kiện bắt buộc hay không.
Đọc tiếp
Thông tin về các Tác giả
