0Pricing
React Academy · Урок

Защита маршрутов на основе промежуточного ПО

Используйте промежуточное ПО Next.js и обратные вызовы авторизации, чтобы перенаправлять неавторизованных пользователей на периферии сети.

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

Что такое промежуточное ПО Next.js

Промежуточное ПО выполняется на периферийном уровне до того, как запрос достигнет маршрута. Оно может перенаправлять запросы, переписывать URL или добавлять заголовки — это идеально подходит для проверок аутентификации без загрузки серверных компонентов.

Создание промежуточного ПО

Создайте middleware.ts в корне проекта. Экспортируйте функцию middleware и сопоставитель config.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

Шаблоны сопоставления

Массив matcher использует шаблоны путей. Используйте :path* для любого вложенного пути или исключайте пути с помощью отрицательного просмотра вперёд.

export const config = {
  matcher: [
    // Protect all routes except public ones:
    '/((?!login|register|_next|api/auth|favicon.ico).*)',
  ],
};

Интеграция промежуточного ПО Auth.js

Auth.js (v5) предоставляет готовый экспорт промежуточного ПО. Повторно экспортируйте его из middleware.ts с сопоставителем.

// middleware.ts
export { auth as middleware } from '@/auth';

export const config = {
  matcher: ['/dashboard/:path*', '/settings/:path*'],
};

Проверка JWT в промежуточном ПО

Проверяйте токен JWT в промежуточном ПО с помощью библиотеки jose (совместимой с периферийной средой — без криптографического модуля Node.js).

import { jwtVerify } from 'jose';

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  try {
    await jwtVerify(token, new TextEncoder().encode(process.env.JWT_SECRET));
    return NextResponse.next();
  } catch {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

Промежуточное ПО на основе ролей

Прочитайте роль пользователя из токена и перенаправьте его на страницу с отказом в доступе, если роль недостаточна.

const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
  return NextResponse.redirect(new URL('/unauthorized', request.url));
}

Передача данных обработчикам маршрутов

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

const response = NextResponse.next();
response.headers.set('x-user-id', payload.sub as string);
response.headers.set('x-user-role', payload.role as string);
return response;

// In a Server Component:
import { headers } from 'next/headers';
const userId = headers().get('x-user-id');

Перезапись URL в промежуточном ПО

Используйте NextResponse.rewrite(), чтобы отобразить другую страницу для URL, не изменяя адресную строку браузера — это полезно для A/B-тестов или флагов функций.

const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
  return NextResponse.rewrite(new URL('/home-v2', request.url));
}

Геоданные и IP в промежуточном ПО

Получайте геоданные запроса и IP из объекта NextRequest для перенаправления или блокировки по региону.

const country = request.geo?.country ?? 'US';
if (country === 'XX') {
  return NextResponse.redirect(new URL('/region-blocked', request.url));
}

Производительность промежуточного ПО

Промежуточное ПО выполняется на периферийном уровне для каждого подходящего запроса. Делайте его лёгким — избегайте ресурсоёмких вычислений и крупных импортов. Используйте только библиотеки, совместимые с периферийной средой.

Объединение защищённых и общедоступных маршрутов

Распространённый подход: защищать всё, кроме определённого списка общедоступных путей, который проверяется перед логикой аутентификации.

const PUBLIC_PATHS = ['/login', '/register', '/about'];
const isPublic = PUBLIC_PATHS.some(p => request.nextUrl.pathname.startsWith(p));
if (isPublic) return NextResponse.next();

// Auth check for non-public routes
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));

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

Какую библиотеку следует использовать для проверки JWT внутри промежуточного ПО Next.js вместо криптографического модуля Node.js?

Итоги

Создайте middleware.ts в корне проекта с конфигурацией matcher. Проверяйте токены аутентификации с помощью совместимой с периферийной средой библиотеки jose, перенаправляйте неаутентифицированных пользователей и передавайте декодированные данные серверным компонентам через заголовки ответа. Поддерживайте высокую скорость работы промежуточного ПО и не перегружайте его зависимостями.

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

Урок «Защита маршрутов на основе промежуточного ПО» бесплатный?

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

Чему я научусь в уроке «Защита маршрутов на основе промежуточного ПО»?

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

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

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

Сколько времени занимает урок «Защита маршрутов на основе промежуточного ПО»?

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

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

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

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

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