نحوه ایجاد یک مسیر محافظت شده در React

جلوگیری از دسترسی کاربران غیرمجاز به صفحه React شما برای امنیت بسیار مهم است. در اینجا نحوه انجام آن آمده است.

مسیرهای محافظت شده مسیرهایی هستند که فقط به کاربران مجاز اجازه دسترسی می دهند. این بدان معناست که کاربران قبل از دسترسی به آن مسیر خاص، ابتدا باید شرایط خاصی را رعایت کنند. برای مثال، برنامه شما می‌تواند فقط به کاربرانی که وارد سیستم شده‌اند نیاز داشته باشد که بتوانند از صفحه داشبورد بازدید کنند.

در این آموزش قصد دارید نحوه ایجاد مسیرهای محافظت شده در برنامه React را یاد بگیرید.

توجه داشته باشید که از React Router v6 استفاده خواهید کرد که کمی با نسخه های قبلی متفاوت است.

شروع شدن

برای شروع، از create-react-app برای بوت استرپ کردن یک برنامه ساده React استفاده کنید.

npx create-react-app protect-routes-react

به پوشه ای که به تازگی ایجاد شده است بروید و برنامه خود را اجرا کنید.

cd protect-routes-react
npm start

پوشه برنامه خود را با ویرایشگر متن دلخواه خود باز کنید و آن را پاک کنید. app.js شما باید به این شکل باشد.

function App() {
return <div></div>;
}
export default App;

اکنون آماده تنظیم مسیرها هستید.

مطالب مرتبط: چگونه اولین برنامه React خود را با جاوا اسکریپت ایجاد کنیم

راه اندازی روتر React

شما از React Router برای تنظیم ناوبری برای برنامه خود استفاده خواهید کرد.

react-router-dom را نصب کنید.

npm install react-router-dom

برای این برنامه شما سه صفحه اصلی خواهید داشت:

• صفحه اصلی (صفحه فرود).
• صفحه نمایه (محافظت شده، بنابراین فقط کاربرانی که وارد سیستم شده اند دسترسی دارند).
• صفحه درباره (عمومی تا همه بتوانند به آن دسترسی داشته باشند).

در Navbar.js، از مؤلفه Link از react-router-dom برای ایجاد پیوندهای ناوبری به مسیرهای مختلف استفاده کنید.

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;

در 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="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;

اکنون باید مؤلفه هایی را که در App.js به آنها ارجاع داده اید ایجاد کنید.

در Home.js:

const Home = () => {
return <h1>Home page</h1>;
};
export default Home;

در Profile.js

const Profile = () => {
return <h1 style={{ textAlign: "center" }}>Profile Page</h1>;
};
export default Profile;

در About.js

const About = () => {
return <h1 style={{ textAlign: "center" }}>About page</h1>;
};
export default About;

ایجاد مسیرهای محافظت شده در React

مرحله بعدی ایجاد مسیرهای محافظت شده است. مسیرهای home و about عمومی هستند به این معنی که همه می‌توانند به آن‌ها دسترسی داشته باشند، اما مسیر نمایه باید ابتدا کاربران را احراز هویت کنند. بنابراین، باید راهی برای ورود کاربران ایجاد کنید.

تنظیم احراز هویت جعلی

از آنجایی که این یک آموزش احراز هویت نیست، از React useState hook برای شبیه سازی یک سیستم ورود استفاده خواهید کرد.

در App.js موارد زیر را اضافه کنید.

import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
<em>// Other import stamementsem>

منبع مقاله