Работа с маршрутами защищенных страниц в NextJS с помощью NextAuth

Работа с маршрутами защищенных страниц в NextJS с помощью NextAuth

Содержание
  1. Конфигурация
  2. Создайте Middleware
  3. Добавим код для промежуточного ПО
    1. Защита всех маршрутов
    2. Защита выборочных маршрутов
    3. Защита маршрутов внутри директории

В этой статье мы будем использовать технику промежуточного ПО.

Для использования этого функционала у вас должны быть установлены как минимум NextAuth.js 4.2.0 и Next.js 12.

Конфигурация

Давайте настроим сервер, добавив новую переменную окружения в файл .env.local.

NEXTAUTH_SECRET=addAnythingYouLike.

Создайте Middleware

Создайте файл с именем middleware.js или .tsx в папке src.

Примечание: если у вас нет папки src, создайте файл middleware.js` в корневой папке.

Добавим код для промежуточного ПО

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

Используйте приведенный ниже код, чтобы сделать все страницы защищенными.

export { default } from "next-auth/middleware";.

Защита выборочных маршрутов

Давайте защитим маршруты профиля и сообщений с помощью matcher. Вы можете поместить маршрут в соответствии с вашими требованиями

export { default } from "next-auth/middleware"; export const config = { matcher: ["/profile", "/posts"] }; .

Защита маршрутов внутри директории

Защитим все маршруты внутри папки dashboard.

export { default } from "next-auth/middleware"; export const config = { matcher: ["/dashboard/", "/dashboard/:path*"] };

Подробнее о matcher и NextAuth Middleware

Вот и все!

Счастливого кодинга!