Что можно использовать вместо middleware в Next.js?

Добрый день! <br/> Я столкнулся с ограничениями middleware в Next.js и хотел бы обсудить свою идею по реализации авторизации при загрузке сайта. Суть заключается в следующем сценарии на серверной стороне Next.js (SSR): <br/> 1. Используя gRPC подключение, Next.js отправляет запрос на сервер Node.js с токеном. <br/> 2. Сервер проводит проверку и возвращает ответ. <br/> 3. В зависимости от полученного ответа сервера должно произойти перенаправление на другой адрес и аннулирование токена. <br/> <br/> Однако у меня возникла проблема: в middleware Next.js нельзя выполнять код на Node.js. Временно я перенёс проверку авторизации и перенаправление в основной файл layout.tsx, но, по моему мнению, это не самое оптимальное решение. <br/> <br/> Возможно, кто-то сталкивался с подобной ситуацией? Как именно вы ее решили, или, может быть, я делаю что-то неправильно?
  • 12 февраля 2025 г. 21:14
Ответы на вопрос 2
Добрый день!

Ваш сценарий действительно вызывает необходимость в более гибком подходе к авторизации в Next.js. Важно отметить, что Middleware в Next.js запускается на уровне сервера и имеет ограничения по выполнению асинхронного кода (например, обращения к внешним сервисам через gRPC). Однако существуют альтернативные методы для выполнения авторизации на серверной стороне.

### Возможные решения:

1. **getServerSideProps**: 
   Используйте функцию `getServerSideProps` для выполнения проверки авторизации на серверной стороне. Эта функция вызывается перед рендерингом страницы, что позволяет вам получать необходимые данные и выполнять логику проверки:

   ```javascript
   export async function getServerSideProps(context) {
       const { req, res } = context;
       const token = req.cookies.token; // или другой способ получить токен

       // Выполните gRPC-запрос здесь для проверки токена
       const response = await grpcClient.verifyToken(token);

       if (response.valid) {
           // Если токен валидный, возвращайте необходимые данные
           return { props: { authenticated: true } };
       } else {
           // Если токен невалидный, редирект на другую страницу
           res.writeHead(302, { Location: '/login' });
           res.end();
           return { props: {} }; // Верните пустые props, так как редирект уже был выполнен
       }
   }
   ```

2. **API Routes**:
   Вы можете создать API Route для обработки авторизации. Затем вызывайте этот API из `getServerSideProps`. Например:

   ```javascript
   // pages/api/auth/check.js
   export default async function handler(req, res) {
       const token = req.headers.authorization;

       const isValid = await grpcClient.verifyToken(token); // Ваш gRPC-запрос
       if (isValid) {
           res.status(200).json({ valid: true });
       } else {
           res.status(403).json({ valid: false });
       }
   }
   ```

   И затем используйте этот API в `getServerSideProps`.

3. **Sessions**:
   Рассмотрите возможность использования библиотек для работы с сессиями (например, `next-auth`), если вам нужно управлять пользовательскими сессиями и аутентификацией. Эти библиотеки могут упростить процесс проверки токена и управления состоянием пользователя на стороне сервера.

4. **Server Middleware**:
   Если вы используете Next.js с Express или другим сервером, вы можете добавить собственные middleware в ваш серверный код для выполнения проверки авторизации перед отправкой ответов.

Каждое из этих решений имеет свои плюсы и минусы, и выбор подхода будет зависеть от специфики вашего приложения и архитектуры. Но, как правило, использование `getServerSideProps` или API Routes является наиболее привычным и удобным способом для работы с авторизацией в Next.js.
Похожие вопросы