نحوه مدیریت داده‌های جلسه کاربر در React با استفاده از کوکی‌ها و ذخیره‌سازی جلسه

با نحوه ذخیره داده های احراز هویت کاربر و سایر اطلاعات شخصی شده با استفاده از کوکی ها و ذخیره سازی جلسه در React آشنا شوید.

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

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

مدیریت داده‌های جلسه کاربر با استفاده از کوکی‌ها و ذخیره‌سازی جلسه

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

داده‌های جلسه کاربر معمولاً شامل اطلاعاتی است که مختص جلسه فعلی کاربر یا تعامل با یک برنامه است. این داده ها می تواند بسته به الزامات و عملکرد برنامه متفاوت باشد، اما معمولاً شامل موارد زیر است:

• اطلاعات مربوط به احراز هویت
• تنظیمات و تنظیمات کاربر
• فعالیت و سابقه کاربر

کوکی ها فایل های متنی هستند که حاوی قطعات کوچکی از داده های ذخیره شده توسط مرورگرهای وب در دستگاه کاربر هستند. آنها معمولاً برای ذخیره داده های احراز هویت و سایر اطلاعات شخصی سازی شده کاربر استفاده می شوند و به برنامه های کاربردی وب اجازه می دهند جلسات کاربر را در چندین جلسه مرورگر حفظ کنند.

از سوی دیگر، ذخیره‌سازی جلسه – مشابه ذخیره‌سازی محلی – یک مکانیسم ذخیره‌سازی سمت مشتری است که توسط مرورگرهای مدرن ارائه می‌شود. برخلاف کوکی ها، محدود به یک جلسه مرور خاص است و فقط در همان برگه یا پنجره قابل دسترسی است. ذخیره سازی جلسه روشی ساده و سرراست برای ذخیره داده های مربوط به جلسه برای برنامه های کاربردی وب ارائه می دهد.

هم کوکی‌ها و هم ذخیره‌سازی جلسه نقش مهمی در مدیریت داده‌های جلسه کاربر دارند. کوکی ها در شرایطی که ماندگاری داده در چندین جلسه مورد نیاز است عالی هستند. در مقابل، ذخیره‌سازی جلسه زمانی سودمند است که می‌خواهید داده‌ها را در یک جلسه مرور جدا کنید و یک گزینه ذخیره‌سازی سبک و خاص ارائه دهید.

اکنون، بیایید نحوه مدیریت داده‌های جلسه کاربر، به ویژه تمرکز بر ذخیره اطلاعات احراز هویت با استفاده از کوکی‌ها و ذخیره‌سازی جلسه را بررسی کنیم.

یک پروژه React راه اندازی کنید

برای شروع، یک پروژه React را با استفاده از Vite راه اندازی کنید. در مرحله بعد، این بسته ها را در پروژه خود نصب کنید.

npm install js-cookie react-router-dom

در حالت ایده‌آل، پس از ورود کاربر و تأیید اعتبار اعتبار آنها توسط یک API تأیید اعتبار پشتیبان، کوکی‌ها و ذخیره‌سازی جلسه توکن‌های تأیید هویت، شناسه‌های جلسه یا هر داده مرتبط دیگری در طول جلسه کاربر تأیید شد.

این نشانه‌ها یا شناسه‌ها به همراه داده‌های اضافی ذخیره‌شده در مرورگر کاربر به‌طور خودکار در درخواست‌های بعدی که برای تأیید به سرور ارائه می‌شوند، قبل از اینکه کاربر بتواند به منابع محافظت‌شده دسترسی پیدا کند، گنجانده می‌شود.

به این ترتیب، جلسه کاربر در چندین درخواست ادامه می‌یابد – تا اطمینان حاصل شود که آنها به طور یکپارچه با برنامه بدون نیاز به احراز هویت مجدد برای هر درخواست تعامل دارند.

می توانید کد این پروژه را در این مخزن GitHub پیدا کنید.

مدیریت داده های جلسه احراز هویت کاربر با استفاده از کوکی ها

برای نشان دادن نحوه استفاده از کوکی ها برای ذخیره اطلاعات احراز هویت کاربران، ادامه دهید و یک فایل components/Login.jsx جدید در دایرکتوری src ایجاد کنید. داخل این فایل کد زیر را اضافه کنید.

1. واردات زیر را انجام دهید import { useState } از ‘react’;import { useNavigate } از ‘react-router-dom’;وارد کردن کوکی ها از ‘js-cookie’;
2. یک جزء کاربردی ایجاد کنید و عناصر JSX را برای یک فرم ورود اضافه کنید. const Login = () => {  const [username, setUsername] = useState(”); const [password, setPassword] = useState(”); بازگشت (    
   
          تنظیم کنید <ورودی        type= "گذرواژه"        placeholder="Password"        value={password}        onChange={(e) => setPassword(e.target.value)}      />       import { useState } from 'react';
   import { useNavigate } from 'react-router-dom';
   import Cookies from 'js-cookie';

   const Login = () => {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
   
     return (
       <form onSubmit={handleLogin}>
         <input
           type="text"
           placeholder="Username"
           value={username}
           onChange={(e) => setUsername(e.target.value)}
         />
         <input
           type="password"
           placeholder="Password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
         />
         <button type="submit">Login</button>
       </form>
     );
   };
   
   export default Login;

   از آنجایی که ما یک API پشتیبان برای احراز هویت کاربر نداریم، تابعی ایجاد می کنیم که داده های وارد شده توسط کاربر در فرم ورود را با استفاده از اعتبارنامه کاربر آزمایشی تأیید می کند. داخل کامپوننت فانکشنال کد زیر را اضافه کنید.

     const testAuthData = {
       username: 'test',
       password: 'test',
     }; 
     const authenticateUser = (username, password) => {
       if (username === testAuthData.username && password === testAuthData.password) { 
         const userData = {
           username,
           password,
         };
         const expirationTime = new Date(new Date().getTime() + 60000);
         Cookies.set('auth', JSON.stringify(userData), { expires: expirationTime });
         return true;
       }
       return false;
     };
     const handleLogin = (e) => {
       e.preventDefault();
       const isAuthenticated = authenticateUser(username, password);
       if (isAuthenticated) {
         navigate('/protected');
       } else {
         // Show error message or perform other actions for failed authentication
       }
     };

   در داخل تابع authenticateUser، بررسی می کند که آیا نام کاربری و رمز عبور ارائه شده با داده های احراز هویت آزمایشی مطابقت دارد یا خیر. اگر اعتبارنامه مطابقت داشته باشد، یک شی userData با نام کاربری و رمز عبور ایجاد می کند. سپس یک زمان انقضا برای کوکی تعیین می کند و داده های کاربر را در یک کوکی به نام auth با استفاده از روش Cookies.set ذخیره می کند.

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

   این داده‌های جلسه کاربر به کد سرور اجازه می‌دهد هویت کاربر را تأیید کند و اجازه دسترسی به امتیازات را بدون نیاز به احراز هویت مجدد کاربر برای هر درخواست صادر کند.

   فایل App.jsx را به روز کنید

   تغییراتی در فایل App.jsx ایجاد کنید تا پس از احراز هویت موفق، مسیریابی کاربر را مدیریت کنید

   import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';
   import Cookies from 'js-cookie';
   import Login from './components/Login';
   
   const ProtectedPage = ({ ...rest }) => {
     const isAuthenticated = !!Cookies.get('auth');
     const navigate = useNavigate();
     const handleLogout = () => { 
       Cookies.remove('auth');
       navigate('/login'); 
     };
   
     if (!isAuthenticated) {
       navigate('/login'); 
       return null; // Return null to prevent rendering anything else
     }
   
     return (
       <div>
         <h1 style={{ fontSize: '24px', color: 'blue' }}>Hello, World!</h1>
         <button style={{ marginTop: '10px' }} onClick={handleLogout}>
           Logout
         </button>
       </div>
     );
   };
   
   const App = () => {
   
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/protected/*" element={<ProtectedPage />} />
           <Route path="/login" element={<Login />} />
         </Routes>
       </BrowserRouter>
     );
   };
   
   export default App;

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

   علاوه بر این، وجود کوکی احراز هویت را تأیید می کند و در صورت عدم وجود آن، کاربران را به صفحه ورود هدایت می کند. با این حال، اگر کوکی وجود داشته باشد، مؤلفه ProtectedPage صفحه‌ای را ارائه می‌کند که منحصراً برای کاربران تأیید شده قابل دسترسی است.

   در نهایت، دستور زیر را اجرا کنید تا سرور توسعه برای آزمایش برنامه بچرخد.

   npm run dev

   در مرورگر خود، به آدرس http://127.0.0.1:5173/login بروید و اعتبارنامه احراز هویت آزمایشی را وارد کنید. پس از ورود موفقیت آمیز به سیستم، یک کوکی جدید حاوی داده های جلسه ایجاد می شود که شامل اطلاعات احراز هویت آزمایشی است.

   

   هنگامی که کوکی منقضی می شود یا زمانی که روی دکمه خروج کلیک می کنید، کوکی حذف می شود. این عمل به طور موثر جلسه کاربر فعال را پایان می دهد و شما را از سیستم خارج می کند.

   ذخیره داده‌های احراز هویت کاربر با استفاده از ذخیره‌سازی جلسه

   هر دو ذخیره سازی جلسه و کوکی ها به طور مشابه عمل می کنند. برای ذخیره اطلاعات لازم در ذخیره‌سازی جلسه مرورگر، می‌توانید از روش sessionStorage.setItem استفاده کنید.

    sessionStorage.setItem('auth', JSON.stringify(userData));

   با افزودن عبارت بالا در داخل تابع authenticateUser در مؤلفه Login، می‌توانید داده‌های احراز هویت کاربر را در ذخیره‌سازی جلسه مرورگر ذخیره کنید.

   بررسی موارد استفاده اضافی برای کوکی‌ها و ذخیره‌سازی جلسه

   این راهنما نحوه استفاده از کوکی‌ها و ذخیره‌سازی جلسه برای ذخیره اعتبار احراز هویت کاربران را برجسته می‌کند. با این وجود، کوکی‌ها و ذخیره‌سازی جلسه طیف وسیع‌تری از قابلیت‌ها را فراتر از ذخیره اطلاعات احراز هویت ارائه می‌کنند.

   با استفاده از این ویژگی‌ها، می‌توانید داده‌های جلسه اضافی را مدیریت کنید که منجر به تجربه کاربری ایمن‌تر و شخصی‌شده‌تر می‌شود.

   منبع مقاله

   مطلب مرتبط:   CLI چیست و چه معنایی دارد؟

   Tags: آموزش کد نویسی بیسکویت ها ذخیره سازی نکات کد نویسی واکنش نشان دهند