Как реализовать авторизацию в next-приложении с применением api yii2?

Question

[Ebers-Hyde]

Добрый день. Я в процессе изучения next.js/react и создания проекта на основе next (фронтенд) и php-фреймворка yii2 (бэк). Уже третью неделю я нахожусь в полном тупике и не могу сделать нормальную авторизацию посредством rest. Саму по себе связь между ними я наладил, получить данные из api я могу. Но в некоторых местах мне необходимо сразу же рендерить пользовательские данные, если они присутствуют (в первую очередь это хедер с username пользователя и далее ещё добавится количество товаров в корзине). Нюанс в том, что бэк занимает маршрут /api, который нужен нексту для общения с сервером. Поэтому мне приходится писать авторизацию самому без применения библиотек. Сначала я пытался после логина сохранить в куки браузера username и при загрузке приложения если он есть рендерить хедер с ним, однако это ломает мне вёрстку по причине того, что на сервере кук не видно а значит страница формируется по одному шаблону, а на клиенте пытается подставить данные. Затем я решил сохранять в куки auth_token и получать username в _app.tsx методом getInitialProps, опираясь на статью https://jools.dev/server-side-auth-with-nextjs-con.... Однако, и там в контексте приложения куки нет, из-за чего запрос заканчивается неудачей. Для большей наглядности выгрузил фронт проекта в codesandbox - https://codesandbox.io/s/applecart-next-o9u4v Штука в том что здесь куки внутри myApp.ctx.req.cookies присутствуют, если вывести их в консоль, а вот на моём сервере уже нет.

Знающие, подскажите пожалуйста, как я в данной ситуации могу добиться хранения кук и чтения их для получения необходимых данных при первоначальной отрисовке?

Comments

[Ebers-Hyde]

Ещё пробовал всё-таки дать доступ до pages/api , точнее сделать rewrite в конфиге next, чтобы допустим при вводе адреса /next-api/ открывать содержимое pages/api/.. , но это отдаёт мне 404 со стороны сервера (даже не next или yii). То ли из-за того что страницы сейчас отрисовываются на сервере, то ли ещё из-за чего.

[nowm]

Ebers-Hyde, а у вас JS-файлы с какого сервера загружаются? С точно того же самого (с точно таким же портом) или с какого-нибудь вроде мой-сайт:8888?

[Ebers-Hyde]

nowm, не уверен что конфиг nginx сайта правильно настроен.

У меня там всё с 80 порта. Немного покопался, теперь нет 404, но и страница запрашивается индексная по маршруту например next-api/hello

Конфиг nginx:

server {
    charset utf-8;
    client_max_body_size 128M;

    listen 80; ## listen for ipv4

    server_name dev.xxxxxx.ru www.dev.xxxxxx.ru;
    root        /var/www/dev.xxxxxx.ru/api/web;
    index       index.html;

    access_log  /var/log/nginx/dev-xxxxxxx-access.log;
    error_log   /var/log/nginx/dev-xxxxxxxx-error.log;

    location /_next/static {
          root /var/www/dev.xxxxxxxx.ru/next-app;
          add_header Cache-Control "max-age=31536000";
        }

    location / {
          root /var/www/dev.xxxxxxxxx.ru/next-app;
          try_files $uri.html  $uri $uri/ /index.html;
          add_header Cache-Control "no-cache";
        }

    location /api {
        try_files $uri $uri/ /index.php?$args;
    }

    location  ~ \.php$ {
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        try_files $uri =404;
    }
}

[nowm]

Ebers-Hyde, сорри, я тогда не знаю, в чём может быть дело. Если бы JS-файлы запрашивались с того же сервера, но с другим портом, то мог бы иметь место вариант с политиками CORS в браузере, потому что получились бы разные хосты, но в вашем случае Nginx проксирует статику, так что она на том же хосте, что и JS-файлы.

Answer 1

[Антон Шаманов]

Нюанс в том, что бэк занимает маршрут /api, который нужен нексту для общения с сервером

ну так не занимай его, в чем проблема? кроме того маршрутизация nextjs не связана с маршрутизацией yii

можешь попробовать такой вариант
https://ru.wikipedia.org/wiki/JSON_Web_Token
https://github.com/sizeg/yii2-jwt
https://github.com/vercel/examples/tree/main/edge-...

Comments

[Ebers-Hyde]

Антон Шаманов разобрался, что я и не могу использовать api некста из-за того, что экспортирую приложение как статический сайт. в связи с этим, могу ли я как-то безопасно хранить и использовать jwt в клиентских куках?

[Антон Шаманов]

Ebers-Hyde, разобрался он бл..ть даже википедию не дочитал.. понятно почему ты пару месяцев ничего сделать не можешь

[Антон Шаманов]

Ebers-Hyde, тебе не надо на клиенте никаких кук, максимум открытые данные пользователя вроде логина/имени и емейла просто для упрощения генерации кода