האימות משמש מחסום הגנה ליישומי תוכנה, מאמת את זהות המשתמשים ומתן גישה למשאבים מוגנים. עם זאת, דרישה מהמשתמשים לאימות שוב ושוב, במיוחד בתוך הפעלה בודדת, עלולה להוביל לתסכול, לעכב פרודוקטיביות ולהרוס את החוויה הכוללת שלהם.

כדי להתגבר על האתגר הזה, אתה יכול להשתמש בקובצי Cookie ואחסון הפעלה כדי להתמיד בנתוני אימות משתמשים ואחרים מותאמים אישית מידע - מה שמאפשר למשתמשים להישאר מאומתים במהלך הפגישה ללא צורך באימות חוזר מתמיד, וכתוצאה מכך, שיפור הניסיון שלהם.

ניהול נתוני הפעלה של משתמש באמצעות קובצי Cookie ואחסון הפעלה

ניהול הפעלות משתמש הוא היבט מכריע בבניית יישומי React חזקים ומאובטחים. ניהול נכון של נתוני הפעלה באמצעות קובצי Cookie ואחסון הפעלה מבטיח חווית משתמש חלקה ומותאמת אישית תוך שמירה על אמצעי האבטחה הדרושים.

נתוני הפעלה של משתמש כוללים בדרך כלל מידע ספציפי להפעלה הנוכחית של משתמש או לאינטראקציה עם אפליקציה. נתונים אלה עשויים להשתנות בהתאם לדרישות ולפונקציונליות של האפליקציה, אך בדרך כלל כוללים את הדברים הבאים:

• מידע הקשור לאימות.
• העדפות והגדרות משתמש.
• פעילות המשתמש וההיסטוריה.

קובצי Cookie הם קבצי טקסט המכילים פיסות נתונים קטנות מאוחסנים על ידי דפדפני אינטרנט במכשיר של המשתמש. הם משמשים בדרך כלל לאחסון נתוני אימות וכל מידע מותאם אישית אחר של משתמש, מה שמאפשר ליישומי אינטרנט לתחזק הפעלות משתמש על פני מספר הפעלות של דפדפן.

מצד שני, אחסון הפעלה - בדומה לאחסון מקומי-הוא מנגנון אחסון בצד הלקוח המסופק על ידי דפדפנים מודרניים. בניגוד לקובצי Cookie, הוא מוגבל להפעלת גלישה ספציפית ונגיש רק בתוך אותה כרטיסייה או חלון. אחסון הפעלות מציע דרך פשוטה ונוחה לאחסן נתונים ספציפיים להפעלה עבור יישומי אינטרנט.

גם קובצי Cookie וגם אחסון הפעלה ממלאים תפקידים מכריעים בניהול נתוני הפעלה של משתמשים. קובצי Cookie מעולים במצבים שבהם נדרשת התמדה של נתונים על פני מספר הפעלות. לעומת זאת, אחסון הפעלות הוא יתרון כאשר אתה רוצה לבודד נתונים בתוך סשן גלישה בודד, ומספק אפשרות אחסון קלת משקל וספציפית.

כעת, בואו נחקור כיצד לטפל בנתוני הפעלה של משתמשים, תוך התמקדות ספציפית באחסון מידע אימות באמצעות קובצי Cookie ואחסון הפעלה.

הגדר פרויקט React

להתחיל, הגדר פרויקט React באמצעות Vite. לאחר מכן, התקן את החבילות הללו בפרויקט שלך.

npm להתקין js-cookie react-router-dom

באופן אידיאלי, לאחר שמשתמש מתחבר והאישורים שלו מאומתים בהצלחה על ידי ממשק API לאימות עורפי, קובצי Cookie ואחסון הפעלה מאחסנים אסימוני אימות, מזהי הפעלה או כל מידע רלוונטי אחר במהלך השימוש של המשתמש מוֹשָׁב.

האסימונים או המזהים הללו יחד עם הנתונים הנוספים המאוחסנים בדפדפן של המשתמש מתבצעים באופן אוטומטי נכלל בבקשות עוקבות שנשלחו לשרת לצורך אימות לפני שמשתמש יוכל לגשת מוגן אֶמְצָעִי.

בדרך זו, הפגישה של משתמש נמשכת על פני מספר בקשות - מה שמבטיח שהם מקיימים אינטראקציה חלקה עם האפליקציה ללא צורך באימות מחדש עבור כל בקשה.

אתה יכול למצוא את הקוד של הפרויקט הזה בזה מאגר GitHub.

ניהול נתוני הפעלה של אימות משתמשים באמצעות קובצי Cookie

כדי להדגים כיצד להשתמש בקובצי Cookie כדי לאחסן מידע אימות של משתמשים, קדימה, וצור חדש רכיבים/Login.jsx קובץ ב- src מַדרִיך. בתוך הקובץ הזה, הוסף את הקוד הבא.

1. בצע את הייבוא ​​הבא.

   יְבוּא { useState } מ'לְהָגִיב';
   יְבוּא { useNavigate } מ'react-router-dom';
   יְבוּא עוגיות מ'js-cookie';

2. צור רכיב פונקציונלי והוסף רכיבי JSX עבור טופס התחברות.

   const כניסה = () => {
   const [username, setUsername] = useState('');
   const [סיסמה, setPassword] = useState('');
   לַחֲזוֹר (
   
   
   
    סוג="טֶקסט"
    מציין מיקום="שם משתמש"
    value={שם משתמש}
    onChange={(e) => setUsername (e.target.value)}
    />
    סוג="סיסמה"
    מציין מיקום="סיסמה"
    value={סיסמה}
    onChange={(e) => setPassword (e.target.value)}
    />
   "שלח">כניסה</button>
    </form>
    );
   };
   יְצוּאבְּרִירַת מֶחדָל התחברות;

מכיוון שאין לנו ממשק API לאימות אישורי משתמש, אנו ניצור פונקציה המאמתת את הנתונים שהזין המשתמש בטופס הכניסה באמצעות אישורי משתמש לבדיקה. בתוך הרכיב הפונקציונלי, הוסף את הקוד הבא.

const testAuthData = {
 שם משתמש: 'מִבְחָן',
 סיסמה: 'מִבְחָן',
 }; 
const authenticateUser = (שם משתמש סיסמא) => {
אם (שם משתמש testAuthData.username && סיסמה testAuthData.password) { 
const userData = {
 שם משתמש,
 סיסמה,
 };
const זמן תפוגה = חָדָשׁתַאֲרִיך(חָדָשׁתַאֲרִיך().getTime() + 60000);
 Cookies.set('סמכות', JSON.stringify (userData), { יפוג: תאריך תפוגה });
לַחֲזוֹרנָכוֹן;
 }
לַחֲזוֹרשֶׁקֶר;
 };
const handleLogin = (ה) => {
 e.preventDefault();
const isAuthenticated = authenticateUser (שם משתמש, סיסמה);
אם (מאומת) {
 לנווט('/מוּגָן');
 } אַחֵר {
// הצג הודעת שגיאה או בצע פעולות אחרות עבור אימות כושל
 }
 };

בתוך ה authenticateUser הפונקציה, היא בודקת אם שם המשתמש והסיסמה שסופקו תואמים לנתוני אימות הבדיקה. אם האישורים תואמים, זה יוצר א מידע משתמש אובייקט עם שם המשתמש והסיסמה. לאחר מכן הוא מגדיר זמן תפוגה עבור העוגיה ומאחסן את מידע משתמש בעוגייה בשם אישור משתמש ב קובצי Cookies.set שיטה.

לאחר אימות מוצלח, משתמש מפנה מחדש לדף מוגן מכיוון שהוא מורשה לגשת למשאבים מוגנים. על ידי אחסון פרטי האימות בקובץ cookie, אתה יוצר הפעלת משתמש פעילה, המאפשר לבקשות עוקבות לכלול את פרטי האימות באופן אוטומטי.

נתוני הפעלה אלה של המשתמש מאפשרים לקוד השרת לאמת את זהות המשתמש ולאשר גישה להרשאות מבלי לדרוש מהמשתמש אימות מחדש עבור כל בקשה.

עדכן את קובץ App.jsx

בצע שינויים ב- App.jsx קובץ לטיפול בניתוב משתמשים לאחר אימות מוצלח

יְבוּא { BrowserRouter, Route, Routes, useNavigate } מ'react-router-dom';
יְבוּא עוגיות מ'js-cookie';
יְבוּא התחברות מ'./components/Login';
const ProtectedPage = ({ ...מנוחה }) => {
const isAuthenticated = !!Cookies.get('סמכות');
const navigate = useNavigate();
const handleLogout = () => { 
 Cookies.remove('סמכות');
 לנווט('/התחברות'); 
 };
אם (!isAuthenticated) {
 לנווט('/התחברות'); 
לַחֲזוֹרריק; // החזר null כדי למנוע עיבוד של כל דבר אחר
 }
לַחֲזוֹר (



גודל גופן: '24px', צֶבַע: 'כְּחוֹל' }}>שלום, עולם!</h1>
marginTop: '10px' }} onClick={handleLogout}>
 להתנתק
 </button>
 </div>
 );
};


const אפליקציה = () => {
לַחֲזוֹר (


"/מוּגָן/*" element={} />
"/התחברות" element={} />
 </Routes>
 </BrowserRouter>
 );
};
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

הקוד למעלה מגדיר את הרכיבים הדרושים ואת היגיון הניתוב. הוא כולל כפתור התנתקות שבלחיצה עליו מוחק את קובץ ה-Cookie האימות ומפנה את המשתמש לדף הכניסה.

בנוסף, הוא מאמת את נוכחות קובץ ה-Cookie לאימות ומפנה משתמשים לדף הכניסה אם הוא נעדר. עם זאת, אם העוגייה קיימת, ה- דף מוגן רכיב מעבד דף שנגיש בלעדית למשתמשים מאומתים.

לבסוף, הפעל את הפקודה למטה כדי לסובב את שרת הפיתוח כדי לבדוק את היישום.

npm run dev

בדפדפן שלך, נווט אל http://127.0.0.1:5173/login, והזן את אישורי אימות הבדיקה. לאחר כניסה מוצלחת, נוצרת קובץ Cookie חדש המכיל את נתוני ההפעלה, הכוללים את פרטי אימות הבדיקה.

ברגע שתוקף ה-cookie פג או כאשר אתה לוחץ על כפתור היציאה, ה-cookie נמחק. פעולה זו מסיימת למעשה את הפעלת המשתמש הפעילה ומוציאה אותך מהחשבון.

אחסון נתוני אימות משתמש באמצעות אחסון הפעלה

גם אחסון הפעלות וגם קובצי Cookie פועלים באופן דומה. כדי לאחסן את המידע הדרוש באחסון הפעלות של הדפדפן, אתה יכול להשתמש ב- sessionStorage.setItem שיטה.

 sessionStorage.setItem('סמכות', JSON.stringify (userData));

על ידי הוספת ההצהרה למעלה בתוך authenticateUser פונקציה ב התחברות רכיב, אתה יכול לאחסן את נתוני האימות של המשתמש באחסון ההפעלה של הדפדפן.

בחינת מקרי שימוש נוספים עבור קובצי Cookie ואחסון הפעלה

מדריך זה הדגיש כיצד להשתמש בקובצי Cookie ובאחסון הפעלה כדי לאחסן את אישורי האימות של המשתמשים. עם זאת, קובצי Cookie ואחסון הפעלה מציעים מגוון רחב יותר של יכולות מעבר לאחסון מידע אימות.

על ידי מינוף תכונות אלה, תוכל לנהל נתוני הפעלה נוספים, מה שיוביל לחוויית משתמש מאובטחת ומותאמת יותר.