0Pricing
React Academy · Урок

Управление сеансами и хук useSession

Получайте данные сеанса в серверных и клиентских компонентах и защищайте страницы в зависимости от статуса авторизации.

«Управление сеансами и хук useSession» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Типы сеансов в Auth.js

Auth.js поддерживает две стратегии сеансов: JWT (по умолчанию, токен без состояния в файле cookie) и база данных (запись сеанса в базе данных, которую можно сделать недействительной на сервере).

useSession в клиентских компонентах

useSession() — это хук клиентского компонента, который считывает текущий сеанс. Он возвращает data (сеанс), status ('loading' | 'authenticated' | 'unauthenticated') и функцию update.

'use client';
import { useSession } from 'next-auth/react';

export function UserAvatar() {
  const { data: session, status } = useSession();
  if (status === 'loading') return <Spinner />;
  if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
  return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}

Настройка SessionProvider

Оберните приложение (или дерево клиентских компонентов) в SessionProvider, чтобы useSession получил доступ к контексту сеанса.

// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
  return <html><body><Providers>{children}</Providers></body></html>;
}

auth() в серверных компонентах

В серверных компонентах используйте непосредственно auth() — хук и провайдер не нужны. Функция считывает сеанс из cookie на сервере.

import { auth } from '@/auth';

export default async function Header() {
  const session = await auth();
  return (
    <nav>
      {session ? (
        <span>Hello, {session.user?.name}</span>
      ) : (
        <Link href="/login">Sign in</Link>
      )}
    </nav>
  );
}

Защита клиентских маршрутов

Используйте useSession с параметром required: true, чтобы автоматически перенаправлять неаутентифицированных пользователей на страницу входа.

'use client';
import { useSession } from 'next-auth/react';

export default function ProtectedPage() {
  const { data: session } = useSession({ required: true });
  // session is never null here — unauthenticated users are redirected
  return <div>Welcome, {session?.user?.name}</div>;
}

Обновление сеанса

Вызовите функцию update(), возвращаемую useSession, чтобы обновить сеанс, например после изменения профиля, без выхода из системы и повторного входа.

const { data: session, update } = useSession();

async function handleNameChange(newName: string) {
  await updateUserName(newName); // API call
  await update({ user: { name: newName } }); // refresh session
}

Функции обратного вызова сеанса JWT

Используйте функцию обратного вызова jwt, чтобы добавлять пользовательские данные в токен JWT при входе, а функцию обратного вызова session — чтобы сделать их доступными в объекте сеанса.

callbacks: {
  async jwt({ token, user }) {
    if (user) token.role = user.role; // add on first sign-in
    return token;
  },
  async session({ session, token }) {
    session.user.role = token.role as string;
    return session;
  },
},

Истечение срока действия сеанса

Настройте максимальный срок действия сеанса в конфигурации Auth.js. Активные сеансы JWT автоматически обновляются при каждом запросе.

export const { handlers, auth } = NextAuth({
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60,   // refresh if older than 1 day
  },
});

Отзыв сеансов в базе данных

Сеансы в базе данных можно отозвать на сервере, что удобно для принудительного выхода из системы. Удалите запись сеанса из базы данных, чтобы немедленно сделать его недействительным.

// Server Action to log out all devices:
async function logOutAllDevices() {
  'use server';
  const session = await auth();
  if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
  redirect('/login');
}

Доступ на основе ролей в клиентских компонентах

Считайте роль сеанса с помощью useSession и условно отображайте интерфейс в зависимости от неё.

const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';

return (
  <>
    {isAdmin && <AdminPanel />}
    <UserContent />
  </>
);

Быстрая проверка

Какой провайдер должен оборачивать приложение, чтобы useSession() работал в клиентских компонентах?

Повторение

Используйте auth() для доступа к сеансу в серверных компонентах и useSession() в клиентских компонентах, обёрнутых в SessionProvider. Добавляйте пользовательские данные с помощью функций обратного вызова JWT и сеанса, обновляйте сеансы на клиенте через update() и настраивайте maxAge для определения срока их действия.

Часто задаваемые вопросы

Урок «Управление сеансами и хук useSession» бесплатный?

Да — полный текст урока «Управление сеансами и хук useSession» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Управление сеансами и хук useSession»?

Получайте данные сеанса в серверных и клиентских компонентах и защищайте страницы в зависимости от статуса авторизации. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Управление сеансами и хук useSession»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка Auth.js в App Router Next.js
  2. Управление сеансами и хук useSession
  3. Поставщик Credentials и пользовательский вход
  4. Защита маршрутов на основе промежуточного ПО
← Назад к React Academy