Сконфигурируйте полностью разделенное интерфейсное веб-приложение с помощью Laravel и VueJS - PullRequest
0 голосов
/ 25 сентября 2018

Я планирую создать многостраничное веб-приложение, использующее Laravel в качестве внутреннего REST API и интерфейс Vue.js для использования этого API.

Для ясности, яменя не интересуют фрагменты кода, описывающие, как именно это настроить, если только некоторые не помогут визуализировать архитектуру.

Что я хотел бы знать, так это то, как этот Split-Stack может быть развернут в полностью разделенном виде.манера.IE ни один из стеков не разделяет кодовую базу и хранятся в полностью независимых репозиториях.

Я не очень знаком с фреймворками JavaScript, кроме jQuery, поэтому я думаю, что мое непонимание связано главным образом с отделом Vue.js.Некоторые вопросы, которые особенно выделяются:

Может ли приложение Vue.js быть размещено на веб-сервере для обслуживания статических файлов HTML, если да, то какой из них совместим?

Может ли обавнешние и внутренние службы выполняются на одном и том же сервере, например, на разных портах, и какие будут лучшие рекомендации для этого?

И как на этом влияет аутентификация входа в систему при запуске веб-приложения, и это должноЯ пытаюсь создать какую-то аутентификацию OAuth между интерфейсом и бэкендом?

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

Инструменты и технологии не обязательно имеют здесь значение, но любые особенности для Vue.js и Laravel приветствуются.

1 Ответ

0 голосов
/ 27 сентября 2018

У меня есть интерфейс VueJS, настроенный с интерфейсом ExpressJS, что очень похоже на то, о чем вы говорите.И да, это вполне возможно.Итак, давайте рассмотрим каждый из ваших вопросов по отдельности.

Может ли приложение Vue.js быть размещено на веб-сервере для обслуживания статических файлов HTML, если да, то какой из них совместим?

Да, когда вы запускаете VueJS, вы можете либо build как статическое приложение, либо serve как приложение NodeJS.

См. Раздел Развертывание документации по Vue CLI 3 здесь .В нем объясняется, как каталог /dist используется для обслуживания приложения VueJS так, как вы намереваетесь.

Могут ли как внешние, так и внутренние службы работать на одном сервере, на разных портах дляНапример, и какие будут лучшие рекомендации для этого?

Недавно я опубликовал пример того, как разместить ваш Front-End и API на одном сервере здесь .(Включает примеры кодирования и пояснения).Этот ответ ссылается на ExpressJS как на API, но принципы те же.На самом деле, просто прослушайте интерфейсный порт на порту 80, а ваш API работает на другом неиспользуемом порту (например, 8081).

И как аутентификация при входе влияет на запуск веб-приложения втаким образом, и я должен искать создание какой-либо аутентификации OAuth между передней и задней панелями?

Я обрабатываю всю аутентификацию на внутренней стороне.По сути, в Vue Router вы можете установить параметр secure.Затем объявите router.beforeEach((to,from,next) => {}); вызов в конце.Затем этот вызов должен проверить, есть ли у пользователя действующий токен для входа, и перенаправить его на страницу входа в приложения после установки файла cookie с URL-адресом, с которого пользователю было предложено войти, чтобы его можно было отправить обратно после входа в систему.

В нашем случае пользователь перенаправляется на маршрут VueJS /saml/login.Компонент /saml/login.Этот компонент выполняет вызов API и возвращает адрес, на который пользователь должен быть перенаправлен для входа в систему.В нашем случае это API (который работает на том же сервере, но с другим портом [см. Ответ выше]), www.example.com:8081/api/v1/saml_login.Затем он работает с IDP и получает токен и пользовательские данные.Здесь вы также можете выполнять функции ACS (подготовка пользователя, обновление времени входа в систему или пользовательских данных и т. Д.). После получения токена он помещается в файл cookie или другой заполнитель, чтобы его можно было использовать для проверки на соответствие.токен хранится в базе данных при первоначальной проверке пользователя.(Лучше всего устанавливать срок действия на токены).Затем пользователь перенаправляется на URL-адрес, сохраненный в файле cookie, который позволяет нам узнать, откуда ему было предложено выполнить вход, чтобы они могли просматривать свое содержимое, не просматривая его снова.(Рад поделиться с вами кодом, если хотите)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...