جلسه مدیریت دولتی | JS | واکنش نشان دهید

Summarize this content to 400 words in Persian Lang

مقدمه

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

انواع مدیریت جلسات

کوکی ها: داده های کوچک ذخیره شده در مرورگر کاربر.
ذخیره‌سازی محلی/ذخیره‌سازی جلسه: روش های ذخیره سازی وب برای ذخیره داده ها در مرورگر کاربر.
JWT (JSON Web Tokens): روشی بدون حالت برای مدیریت جلسات با توکن های رمزگذاری شده.
فروشگاه های جلسه سمت سرور: ذخیره سازی نشست دائمی در سروری که جلسات کاربر را ردیابی می کند.

مدیریت جلسات با جاوا اسکریپت و React

کوکی ها

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

// Setting a cookie
document.cookie = “sessionId=9808@#45; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/login”;

// Reading a cookie
const cookies = (cookieValue) => {
return cookieValue.split(‘; ‘).reduce((acc, cookie) => {
const [key, value] = cookie.split(‘=’);
acc[key] = value;
return acc;
}, {});
}

const cookieObj = cookies(cookie)

console.log(cookieObj.sessionId) // 9808@#45
console.log(cookieObj.expires) // Fri, 31 Dec 2024 23:59:59 GMT
console.log(cookieObj.path) // /login

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ذخیره سازی محلی و جلسه

localStorage داده ها را در جلسات مرورگر حفظ می کند.
sessionStorage فقط داده ها را برای مدت جلسه صفحه (تا زمانی که برگه یا پنجره بسته شود) حفظ می کند.

// React Example
import React from “react”;
import { useState } from “react”;
import { useEffect } from “react”;

const Hero = () => {
// Accessing theme from localStorage for initial state
const [theme, setTheme] = useState(
localStorage.getItem(“theme”) === “dark” ? “dark” : “light”
);

useEffect(() => {
// Updating local storage if theme state is changed
localStorage.setItem(“theme”, theme);
}, [theme]);

// Toggling theme between dark and light
const toggleTheme = () => {
setTheme(theme === “dark” ? “light” : “dark”);
};

return (
<section className={`${theme === “dark” ? “bg-gray-900” : “”} text-white`}>
<div className=”mx-auto px-4 py-32 lg:flex lg:h-screen lg:items-center lg:justify-between max-w-[1200px]”>
<h1>Theme Change Example</h1>
<button
className=”fixed top-4 right-4 rounded bg-blue-600 p-2 text-white hover:bg-transparent hover:text-white focus:outline-none focus:ring”
onClick={toggleTheme}
>
{theme === “dark” ? ” ” : ” “}
</button>
</div>
</section>
);
};

export default Hero;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

احراز هویت JWT

احراز هویت JWT یک مکانیسم احراز هویت بدون حالت مبتنی بر توکن است.

// Manually setting tokens for login
const login = async (username, password) => {
const response = await fetch(‘https://example.com/api/login’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({ username, password }),
});

const data = await response.json();
localStorage.setItem(‘token’, data.token);
};

// Checking tokens with Authorization headers
const getProtectedData = async () => {
const token = localStorage.getItem(‘token’);
const response = await fetch(‘https://example.com/api/protected’, {
method: ‘GET’,
headers: {
‘Authorization’: `Bearer ${token}`,
},
});

const protectedData = await response.json();
return protectedData
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هنگام ورود، سرور یک JWT تولید می کند و آن را برای مشتری ارسال می کند.
مشتری JWT را در localStorage یا sessionStorage ذخیره می کند.
در هر درخواست به یک منبع محافظت شده، مشتری JWT را در هدرها برای احراز هویت ارسال می کند.
منبع – https://www.npmjs.com/package/react-jwt

مدیریت جلسه در Next.js

مدیریت جلسه در Next.js به دلیل ترکیب زمینه های کلاینت و سرور می تواند قوی تر باشد. روش های متداول برای مدیریت جلسات در Next.js شامل استفاده از کوکی ها، JWT ها و کتابخانه های احراز هویت شخص ثالث است. ما قبلا رویکرد کوکی‌ها و JWT را دیده‌ایم و احراز هویت شخص ثالث را با استفاده از next-auth، که یک کتابخانه احراز هویت محبوب برای Next.js است که مدیریت جلسه را ساده‌تر می‌کند، پیاده‌سازی خواهیم کرد.

ذخیره سازی جلسه: جلسات را می توان در JWT (برای احراز هویت بدون حالت) یا پایگاه داده سمت سرور ذخیره کرد.
مدیریت خودکار جلسات: Next-auth انقضا، تمدید و داده های جلسه را به طور خودکار مدیریت می کند.

نصب و راه اندازی

npm install next-auth

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

افزودن ارائه دهنده اعتبار Github

import NextAuth from “next-auth”
import GithubProvider from “next-auth/providers/github”

export const authOptions = {
// Configure one or more authentication providers
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
}

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ایجاد یک ارائه دهنده جلسه برای کل برنامه

“use client”;
import { SessionProvider } from “next-auth/react”
import React from “react”;

const SessionWrapper = ({children}:{children:React.ReactNode}) => {
return <SessionProvider>{children}</SessionProvider>
}
export default SessionWrapper

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بسته بندی Layout با SessionWrapper

import “./globals.css”;
import Navbar from “@/components/Navbar”;
import Footer from “@/components/Footer”;
import SessionWrapper from “@/components/SessionWrapper”;

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang=”en”>
<body>
<SessionWrapper>
<Navbar />
<main>{children}</main>
<Footer />
</SessionWrapper>
</body>
</html>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دسترسی به داده ها و وضعیت جلسه

import { useSession } from “next-auth/react”

export default function Component() {
const { data: session, status } = useSession()

if (status === “authenticated”) {
return <p>Signed in as {session.user.email}</p>
}

return <a href=”/api/auth/signin”>Sign in</a>
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

داده: این می تواند سه مقدار باشد: Session / undefined / null.
وقتی جلسه هنوز واکشی نشده باشد، داده ها تعریف نشده خواهند بود
در صورتی که نتواند جلسه را بازیابی کند، داده ها پوچ خواهند بود
در صورت موفقیت، داده ها Session خواهند شد.
وضعیت: نگاشت enum به سه حالت جلسه ممکن: “بارگیری” | “تأیید شده” | “غیر احراز هویت”

هیدراتاسیون حالت

Hydration فرآیندی است که در آن HTML رندر شده توسط سرور توسط React بر روی کلاینت “استفاده مجدد” می شود و React منطق جاوا اسکریپت خود را (مثلاً شنوندگان رویداد، مدیریت حالت) به HTML موجود متصل می کند.
در Next.js، هیدراتاسیون حالت ضروری است زیرا زمانی که صفحه ای توسط سرور رندر می شود، از قبل با HTML و برخی از حالت های اولیه رندر می شود، اما هنگامی که مرورگر کنترل را به دست گرفت، برنامه React سمت کلاینت باید آن HTML تولید شده توسط سرور را بگیرد و با پیوست کردن شنوندگان رویداد، شروع مجدد حالت، و اطمینان از اینکه برنامه سمت سرویس گیرنده با HTML از پیش رندر شده درست رفتار می کند، آن را “هیدراته” کنید.
اگر برخی از فرآیندها به حالت ناهمزمان وابسته باشند، هیدراتاسیون نیز ممکن است رخ دهد.
در اینجا یک نمونه از آن است

“use client”;
import ProfileCard from “./ProfileCard”;
import BlogsFetch from “./BlogsFetch”;
import { useMarkdownStore } from “@/store/useStore”;

const ProfileSection = () => {
const user = useMarkdownStore((state) => state.user);

return (
<div className=”flex flex-col lg:flex-row justify-center lg:justify-start gap-5 lg:gap-10 px-5″>
<ProfileCard user={user} />
<BlogsFetch userId={user.uid as string} />
</div>
);
};

export default ProfileSection;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

متغیر کاربر به وضعیت کاربر از zustand اشاره دارد که یک کتابخانه مدیریت دولتی است. این حالت ناهمگام است و توسط مؤلفه BlogsFetch استفاده می‌شود که از این user.uid برای انجام واکشی داده‌ها استفاده می‌کند، اما در ابتدا وقتی مؤلفه نصب می‌شود، کاربر null را برمی‌گرداند و واکشی داده‌ها یک آرایه خالی را برمی‌گرداند زیرا وضعیت کاربر بلافاصله هیدراته نمی‌شود.
برای رفع این مشکل، باید منتظر بمانیم تا وضعیت کاربر با مقداری هیدراته شود و سپس واکشی داده را انجام دهیم.

const queryInfinite = useInfiniteQuery({
queryKey: userId ? [“blogs”, userId] : [“blogs”],
queryFn: () =>
userId
? getUserBlogsFromDb(userId, lastDoc)
: getBlogsFromDb(filters, lastDoc),
initialPageParam: undefined,
getPreviousPageParam: (firstPage) => firstPage.firstVisibleDoc,
getNextPageParam: (lastPage) => lastPage.lastVisibleDoc,
enabled: userId ? true : false,
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما از react query برای مدیریت واکشی داده ها و جهش ها استفاده می کنیم، این 1 ویژگی به نام enabled دارد که پس از آماده شدن و هیدراته شدن حالت userId داده ها را واکشی می کند. از طرف دیگر، زمانی که userId برای انجام عملیات واکشی داده ها آماده شد، می توانیم از قلاب useEffect برای واکشی مجدد استفاده کنیم.

منابع

https://next-auth.js.org/getting-started/introduction

https://tanstack.com/query/latest

https://swr.vercel.app/

https://github.com/pmndrs/zustand

برای این پست تمام شدمی توانید با من تماس بگیرید –

اینستاگرام – https://www.instagram.com/supremacism__shubh/لینکدین – https://www.linkedin.com/in/shubham-tiwari-b7544b193/ایمیل – shubhmtiwri00@gmail.com

می توانید در لینک زیر به من کمک کنید با تشکر👇👇https://www.buymeacoffee.com/waaduheck

این پست ها را نیز بررسی کنید

// Setting a cookie
document.cookie = "sessionId=9808@#45; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/login";

// Reading a cookie
const cookies = (cookieValue) => {
   return cookieValue.split('; ').reduce((acc, cookie) => {
    const [key, value] = cookie.split('=');
    acc[key] = value;
    return acc;
   }, {});
}

const cookieObj = cookies(cookie)

console.log(cookieObj.sessionId) // 9808@#45
console.log(cookieObj.expires) // Fri, 31 Dec 2024 23:59:59 GMT
console.log(cookieObj.path) // /login

// React Example
import React from "react";
import { useState } from "react";
import { useEffect } from "react";

const Hero = () => {
  // Accessing theme from localStorage for initial state
  const [theme, setTheme] = useState(
    localStorage.getItem("theme") === "dark" ? "dark" : "light"
  );

  useEffect(() => {
    // Updating local storage if theme state is changed
    localStorage.setItem("theme", theme);
  }, [theme]);

  // Toggling theme between dark and light
  const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };

  return (
    <section className={`${theme === "dark" ? "bg-gray-900" : ""}  text-white`}>
      <div className="mx-auto px-4 py-32 lg:flex lg:h-screen lg:items-center lg:justify-between max-w-[1200px]">
        <h1>Theme Change Example</h1>
        <button
          className="fixed top-4 right-4 rounded bg-blue-600 p-2 text-white hover:bg-transparent hover:text-white focus:outline-none focus:ring"
          onClick={toggleTheme}
        >
          {theme === "dark" ? " " : " "}
        </button>
      </div>
    </section>
  );
};

export default Hero;

// Manually setting tokens for login
const login = async (username, password) => {
  const response = await fetch('https://example.com/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ username, password }),
  });

  const data = await response.json();
  localStorage.setItem('token', data.token);
};

// Checking tokens with Authorization headers
const getProtectedData = async () => {
  const token = localStorage.getItem('token');
  const response = await fetch('https://example.com/api/protected', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}`,
    },
  });

  const protectedData = await response.json();
  return protectedData
};

npm install next-auth

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
}

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

"use client";
import { SessionProvider } from "next-auth/react"
import React from "react";

const SessionWrapper = ({children}:{children:React.ReactNode}) => {
    return <SessionProvider>{children}</SessionProvider>
}
export default SessionWrapper

import "./globals.css";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import SessionWrapper from "@/components/SessionWrapper";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SessionWrapper>
          <Navbar />
            <main>{children}</main>
          <Footer />
        </SessionWrapper>
      </body>
    </html>
  );
}

import { useSession } from "next-auth/react"

export default function Component() {
  const { data: session, status } = useSession()

  if (status === "authenticated") {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

"use client";
import ProfileCard from "./ProfileCard";
import BlogsFetch from "./BlogsFetch";
import { useMarkdownStore } from "@/store/useStore";

const ProfileSection = () => {
  const user = useMarkdownStore((state) => state.user);

  return (
    <div className="flex flex-col lg:flex-row justify-center lg:justify-start gap-5 lg:gap-10 px-5">
      <ProfileCard user={user} />
      <BlogsFetch userId={user.uid as string} />
    </div>
  );
};

export default ProfileSection;

const queryInfinite = useInfiniteQuery({
  queryKey: userId ? ["blogs", userId] : ["blogs"],
  queryFn: () =>
    userId
      ? getUserBlogsFromDb(userId, lastDoc)
      : getBlogsFromDb(filters, lastDoc),
  initialPageParam: undefined,
  getPreviousPageParam: (firstPage) => firstPage.firstVisibleDoc,
  getNextPageParam: (lastPage) => lastPage.lastVisibleDoc,
  enabled: userId ? true : false,
});