Các tuyến được bảo vệ là các tuyến chỉ cho phép người dùng được ủy quyền truy cập. Điều này có nghĩa là trước tiên người dùng phải đáp ứng các điều kiện nhất định trước khi truy cập tuyến đường cụ thể đó. Điều này là cần thiết để bảo mật các tuyến đường hoặc thông tin nhất định. Có nhiều cách khác nhau để bạn có thể sử dụng các tuyến đường được bảo vệ trong React. Một trong số họ đang sử dụng một thành phần bậc cao bao bọc một tuyến đường được bảo vệ và kiểm tra xem người dùng có được xác thực hay không trước khi kết xuất một thành phần.
Tạo ứng dụng phản ứng
Trước khi tạo tuyến đường được bảo vệ, bạn cần tạo ứng dụng React.
Chạy lệnh dưới đây để sử dụng tạo-phản ứng-ứng dụng công cụ lệnh để khởi động ứng dụng.
npx create-react-app protect-routes-react
Các tạo-phản ứng-ứng dụng lệnh sẽ tạo một thư mục có tên bảo vệ tuyến đường phản ứng chứa tất cả các tệp và gói cần thiết để bắt đầu.
Điều hướng đến thư mục và chạy bắt đầu npm để bắt đầu ứng dụng.
cd protect-routes-react
npm start
Mở 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à sửa đổi App.js để nó chỉ chứa đoạn mã sau.
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
Chạy lệnh npm bên dưới trong terminal để cài đặt Reac-router-dom.
npm install react-router-dom
Trong ứng dụng này, bạn sẽ tạo 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 để mọi người có thể truy cập).
Để bắt đầu, hãy tạo một thành phần có tên Navbar.js. Thành phần này sẽ chứa các liên kết điều hướng đến ba trang.
Trong tệp này, hãy nhập tệp liên kết thành phần từ Reac-router-dom và thêm các liên kết.
const { Link } = require("react-router-dom");
const Navbar = () => {
return (
<nav style={{ textAlign: "center", marginTop: "20px" }}>
<Link to="https://www.makeuseof.com/" 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;
Sau khi tạo các liên kết, hãy tạo các tuyến phù hợp trong App.js.
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="https://www.makeuseof.com/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;
Tiếp theo, tạo các thành phần bạn đã tham chiếu trong App.js.
TRONG Trang chủ.js thêm đoạn mã sau để tạo trang chủ.
const Home = () => {
return <h1>Home page</h1>;
};
export default Home;
TRONG Hồ sơ.js thêm đoạn mã sau để tạo trang hồ sơ.
const Profile = () => {
return <h1 style={{ textAlign: "center" }}>Profile Page</h1>;
};
export default Profile;
Cuối cùng, trong About.jshãy thêm đoạn mã sau để tạo trang giới thiệu.
const About = () => {
return <h1 style={{ textAlign: "center" }}>About page</h1>;
};
export default About;
Khi bạn đã tạo các trang, bây giờ bạn có thể tạo các tuyến đường được bảo vệ.
Tạo các tuyến được bảo vệ trong React
Các /trang chủ Và /Về các tuyến là các tuyến công khai, nghĩa là bất kỳ ai cũng có thể truy cập chúng, nhưng chỉ những người dùng được xác thực mới có thể truy cập tuyến hồ sơ. Do đó, bạn cần một cách để đăng nhập với tư cách người dùng.
Thiết lập xác thực giả mạo
Vì đây không phải là hướng dẫn xác thực, bạn sẽ sử dụng React sử dụngState hook để mô phỏng một hệ thống đăng nhập.
TRONG App.jsthêm những điều sau.
import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
<em>
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 bằ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 nhà nước để ĐÚNG VẬY và lần lượt hiển thị từ đă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ể 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ỏ.
Chẳng hạn, nếu thành phần mới của bạn được đặt tên được bảo vệbạn sẽ kết xuất một thành phần riêng tư bằng cách gói nó như thế này:
<Protected isLoggedIn={isLoggedIn}>
<Private />
</Protected>
Các được bảo vệ thành phần sẽ kiểm tra xem isLoggedIn là đúng hay sai. Nếu đó là sự thật, nó sẽ tiếp tục và trả lại Riêng tư thành phần. Nếu sai, nó sẽ chuyển hướng người dùng đến 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 một tệp có tên Được bảo vệ.js và thêm mã sau đây.
import { Navigate } from "react-router-dom";
const Protected = ({ isLoggedIn, children }) => {
if (!isLoggedIn) {
return <Navigate to="https://www.makeuseof.com/" 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 họ không, Điều hướng từ Reac-router-dom chuyển hướng họ đến trang chủ. Tuy nhiên, nếu người dùng được xác thực, thành phần này sẽ hiển thị phần tử con.
Để bảo vệ Hồ sơ tuyến đường, bọc nó với được bảo vệ tuyến đường và vượt qua trong isLoggedIn trạng thái như một chỗ dựa.
<Route
path="/profile"
element={
<Protected isLoggedIn={isLoggedIn}>
<Profile />
</Protected>
}
/>
Thành phần Ứng dụng bây giờ 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="https://www.makeuseof.com/" element={<Home />} />
<Route path='/profile'
element={
<Protected isLoggedIn={isLoggedIn}>
<Profile />
</Protected>
}
/>
<Route path ='/about' element={<About />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
Đó là về 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ố đ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ò
Các tuyến được bảo vệ trong React giúp bạn hạn chế người dùng chưa được xác thực truy cập vào một trang. Điều này rất cơ bản và 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ọ. Chẳng hạn, 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. Tại đây, bạn sẽ cần thêm logic vào được bảo vệ thành phần để kiểm tra xem người dùng có cần quyền truy cập vào tuyến đường đó hay không dựa trên vai trò của họ.