Как заставить Yii2 (PHP) работать с PHPSESSID при локальной разработке с Vue и Webpack?

Question

[coderisimo]

Суть. Все еще хочется получить простую работу Yii в связке с Vue. Т.е не писать rest, не использовать jwt с рефреш-токенами, не настраивать поддомены. И так далее. В данном случае это просто сайт и ничего более.При этом хотелось бы использовать webpack для немедленного обновления странички после изменения в исходниках и прочие плюшки. Речь о локальной разработке. В настоящее время php (yii2) крутится в докере
127.0.0.1:8000 .
Проект vue( quasar.js ) это полностью отдельное приложение - localhost:8080/# После билда все собирается , копируется куда надо в проект Yii , интегрируется в базовую view .Yii не замечает, что его дурят, не используют его фронтэнд с его пенсионерскими формами и табличками на бутстрапе , все работает, как надо.
Однако, devServer webpack хоть и запускает приложение , обновляет оперативно код, УВЫ, не получает сессию в приложении на php. Сессия просто не создается в приложении. Разумеется, я попытался настроить proxy в вебпаке:

proxy: {
        '/': {
          target: 'http://127.0.0.1:8000',
          pathRewrite: {'^/': ''},
          changeOrigin: true,
          secure: false,
        }

без прокси запросы не работают вообще, с ним отрабатывают, даже часть кукисов приходит :

Cookie: XDEBUG_SESSION=PHPSTORM; csrftoken=pGnICOt7JvtQWQCJH3IBTuVti4BY9zwmi9d9Ip8WnY7q5iStlin4gPvxIcFa1kqu; _ga=GA1.1.1833168217.1577004843; gdpr=true; _csrf=721KYaxSy6rOCGu9rLf30vfETmVrHkQU

Но мы же хотим использовать стандартные сессии , чтобы не заморачиваться с jwt , и тут наблюдается полный эпик фейл. Сессии нету. Т.е вот такая кука PHPSESSID=15dd74539c9f9abd33d9451cb626fd23; доступна лишь в мечтах....

Я понимаю , что вопрос специфический, но вдруг ? Любые идеи - вэлкам!
Доброй ночи!

Comments

[profesor08]

А в коде где-то вызывается session_start()? Если вызывается, то такая кука, PHPSESSID, должна сгенерироваться для 127.0.0.1:8000. Потому что ранее, я уже делал подобное, через прокси, и все куки в порядке. А на другом проекте забыл про session_start() и не понимал что происходит.

[coderisimo]

profesor08, спасибо за ответ. Дело в том, что исходный код один и тот же. Запускается на одном и том же докере. Но когда ajax запрос шлется через devServer webpack - PHPSESSID нет, а без него все есть. Я использую Yii2 и все что нужно с PHPSESSID он должен делать сам. Я думал что, возможно, есть настройки для PHP , которые могут скорректировать данную ситуацию.

[profesor08]

coderisimo, https://stackoverflow.com/questions/33233785/using...

[coderisimo]

profesor08,
ну вот там и пишут :

Add proxy to your devServer In webpack dev configuration...

и

...i have no problem with sessions....

Я делаю ровно то же самое и тоже

I have no problem with sessions !

...

except for PHPSESSID :)

[profesor08]

coderisimo, ну смотри внимательнее на адреса, сессия связана с ними, возможно у тебя каждый раз гененрируется новая сессия (тоже сталкивался). Возможно как-то не так редирект происходит. Смотри какие заголовки приходят.

[coderisimo]

profesor08, Да, конечно. Еще потанцую с бубном пару часов для приличия. Может, еще что подскажут. Но, похоже, буду и дальше жрать кактус в виде jwt. Сессия не генерируется каждый раз .Она , вообще, пустая. Вообще, в России много воруют...

[profesor08]

coderisimo, выведи https://www.php.net/manual/ru/function.session-id.php если пусто то сессия вообще не стартует, если выдает строку, то сессия создается, если каждый раз строка разная, значит сессия каждый раз создается новая.

Попробуй стартовать php на 80 порту, чтоб target: 'http://127.0.0.1'

[coderisimo]

profesor08,
в Yii есть Yii::$app->session->getId() , делает то же что и https://www.php.net/manual/ru/function.session-id.php , и как я и писал ранее- там пусто :)

Пересобрал докер с PHP на 80 порту. Результат тот же, но обнаружил, что если удалю сессионную куку в браузере из варианта без webpack , который как мне казалось, раньше работал, то и там новая кука не создается. Появилась мысль , что надо написать аутентификацию, аутентифицировать юзера и посмотреть что произойдет. Возможно, сессия включается только для аутентифицированного персонажа.

Спасибо, что натолкнули на возможное решение.

[profesor08]

coderisimo, ну так раз пусто, значит сессия не стартует, код, который отвечает за старт сессии не выполняется, это целиком и полностью проблема Yii. Надо просто запустить сессию, наверняка там есть механизм для этого. Ведь тупо на юзере завязывать это слишком тупо, ведь некоторые вещи могут не зависеть от пользователя, например выбор языка, или что-то в этом роде.

[coderisimo]

profesor08, сессия не стартует если мы не аутентифицированы. Понадобились и другие танцы, но сейчас все вроде работает.

[profesor08]

coderisimo, только сейчас увидел что тут речь про Vue, для Yii есть vue интеграция на автомате.
https://www.yiiframework.com/extension/yii2-vuejs-...

[coderisimo]

profesor08,
вот енто вызывает аллергию :

$form = ActiveForm::begin([
            'enableClientScript' => false,
            'fieldClass' => 'larst\vuefrontend\VueBootstrapActiveField',
            'options' => ['v-on:submit' => new yii\web\JsExpression("submitHandler")]
    ]);

Я напротив, хотел уйти от всего что связано в фронтом в Yii. У меня quasar application. Полная изоляция к едрене
фене )). С бэка только данные , ну и старые добрые ламповые сессии чтоб не париться с правами доступа, аутентификацией, jwt токенами.. )

Answer 1

[coderisimo]

Решение : (надеюсь :) . )

В процессе билда помещаем готовые папки css,fonts,js,statics в папку web yii. Там же должен присутствовать Yii-шный файл index.php. Содержимое полученного в результате билда index.html помещаем в одно из пустых представлений Yii. Туда же нужно добавить <?= Html::csrfMetaTags() ?> .
Все вышеописанные операции происходят автоматом в процессе билда и выполняются webpack-ом. Там , вообще можно написать все , что вам угодно. Копирование, добавление кода в файлы И так далее. Представление , которое мы создали открывается при старте нашего приложения.

После вышеописанных манипуляций в теле странички, где размещается SPA будут присутствовать метатеги с srf :
<?= Html::csrfMetaTags() ?>
далее , перед стартом Vue (например в mounted() {.....} ) нужно извлечь csrf из мета тэгов страницы и добавить его в axios.defaults.headers.common

Это будет работать для приложения , которое работает обычным образом. Версия запущенная через webpack ничего не знает о <?= Html::csrfMetaTags() ?> . Соответственно , пишем экшн getToken, который возвращает нам csrf. Это нужно для разработки, чтобы приложение работало с webpack и его плюшками.

public function actionGetToken()
    {
        return yii:: $app->getRequest()->getCsrfToken();
    }

Этот экнш не требует csrf (считается безопасным так , как он GET ). Далее во vue (например в mounted() {.....} ) , в зависимости от ENV при старте приложения берем csrf либо из метатегов , либо вызывав экшн getToken. Это работает, но....
После того как мы проходим процедуру аутентификации сессия обновляется и старый csrf превращается в тыкву. Так же он обновляется всякий раз, когда мы загружаем новую страничку. В данном случае у нас SPA и многократная загрузка новых станиц нам не грозит.Так что единственное , что еще нужно сделать - сразу после аутентификации обновить csrf токен. Я просто возвращаею его, как результат успешного выполнения login.
Снова обновляем axios.defaults.headers.common актуальным csrf , и на этом все. Остальные запросы подписанные данным токеном работают нормально.
Экшн getToken нужен только при локальной разработке и на проде должен быть выключен.

Comments

[Игорь Васильев]

coderisimo, данное решение и я для себя нашёл. При чём это работает и для React JS и для Vue JS. Next JS тоже комфортно себя чувствует и даже не чихает. Внедрение React и Vue в php фреймворк решение конечно зашкварное, НО! Если рассматривать такой подход как (клиен-сервер), то получается крутое независимое приложение. На Yii2 у нас API а в web приложение которое дёргает эти запросы. Я так угорал на WordPress. В документации есть материал, как получать ответ от WordPress в JSON формате, они уже давно это сделали, кто не знал, так вот, кастомизировать можно и саму БД WordPress, и так же получать через javascript фреймворк фечами или аксиусами. Вообще, это круто, когда вот так просто можно совместить клиент и сервер и получить в итоге реактивный сайт. Можно конечно зависеть от Firebase, если разворачивать проект на GitHub Page, но своё есть своё. Всё равно нужна админка, где можно как-то редактировать данные, или создавать новые. Да и не всё ещё может JavaScript что доступно PHP. И опять же, что мешает сделать сервер на Python (Django) и показывать результат на React или Vue. Смотря какие задачи. И хорошо бы помнить о памяти, производительности, а так же о расширяемости проекта.

Answer 2

[Владимир Коротенко]

Поставьте для ахиоса интерсектор на запросы.
Если нет нужной вам куки обращайтесь на страницу которая содержит только метод старта сессии, например логиниться.

Comments

[coderisimo]

Спасибо, что ответили.
Без devServer webpack - данная кука - PHPSESSID всегда в наличии. Аутентификация по сессии работает в Yii из коробки. Вот я и хочу использовать данный механизм и при локальной разработке с webpack. Возможно , нужно что-то настроить в php ini или Nginx для корректной работы. Вот и задал данный вопрос знатокам :)

[Владимир Коротенко]

coderisimo, Так Yii работает? Или нет?
Если нет, то ставьте заглушку для дев режима и подсовывайте ему валидные MOC данные.

[coderisimo]

Владимир Коротенко, Yii работает (о чем я писал) , но в случае с devServer webpack в ответе на запрос не приходит PHPSESSID ( когда пытаюсь вывести это значение в лог , его просто нет). Другие куки приходят.

[Игорь Васильев]

coderisimo, Вот вы говорите:

Yii работает (о чем я писал) , но в случае с devServer webpack в ответе на запрос не приходит PHPSESSID

Всё решает API.
Напишите функцию, которая проверяет существует ли пользователь с таким id
Гость или зарегистрированный, а так же отловите ошибку на случай если параметр отсутствует. Это набросок такой сырой, как можно получать свои данные во Vue.
Создайте контекст, и обращайтесь по ссылке через axios к своему API. Тем более что есть

Yii::$app->user->isGuest - которая возвращает boolian (true / false)
Ну так и проверяйте. Данные сессии тоже можно получить и передать в json формате, либо получить текущий id Yii::$app->user->identity->id, не вижу сложности, в чём проблема. В Firebase мне кажется они так же реализуют вывод данных о текущем пользователе. Пробуйте, вот пример:

public function actionUser($id = '')
    {
        $user = Api::isUser($id);
        $access = Yii::$app->user->isGuest;

        if($id === '' || $user === false) {
            $res = ['result' => '0', 'message' => 'Error: User does not exist', 'code' => '404'];
        } elseif($access === true) {
            $res = ['result' => '0', 'message' => 'Access denied: Please register or log in', 'code' => '403'];
        } else {
            $res = User::find()
                ->select('firstname, lastname, photo, email')
                ->asArray()
                ->where(['id' => $id])
                ->one();
        }

        $response = Yii::$app->response;
        $response->format = \yii\web\Response::FORMAT_JSON;
        return $response->data = $res;
    }

[coderisimo]

Игорь Васильев, Данная тема не актуальна . Создавалась год назад. Проблема была в работе с csrf токеном (использовать jwt не хотелось). Рабочее решение найдено. Но спасибо, что откликнулись ).