Ответы пользователя по тегу Vue.js
  • Как использовать vue-router в локальном файле?

    dlnsk
    @dlnsk Автор вопроса
    ПК Партнер 01.01 -> ПК Поиск -> IBM PC
    Нужно просто переключиться на hash history.
    import { createRouter, createWebHashHistory } from 'vue-router'
    
    const router = createRouter({
      history: createWebHashHistory(),  // <---
    })
    Ответ написан
    Комментировать
  • Зачем во Vue запросы выносят в services?

    dlnsk
    @dlnsk
    ПК Партнер 01.01 -> ПК Поиск -> IBM PC
    Ко всему уже перечисленному добавлю - это очень удобно для тестирования. Вы можете mock'нуть модули/методы и не дергать при тестировании реальный API.
    Ответ написан
    Комментировать
  • Как реализовать Laravel-проект, с поддержкой нескольких Vue-компонентов?

    dlnsk
    @dlnsk
    ПК Партнер 01.01 -> ПК Поиск -> IBM PC
    Дмитрий выше все правильно написал. И да, все уже сделано за нас: https://github.com/laravel/ui
    Т.е. вы действительно делаете #app в layout'е и Vue обрабатывает все содержимое вашей страницы. Т.о. вы может создавать компоненты и вставлять их в необходимые места.
    А про разграничение доступа: кто вам мешает использовать в blade @if и не показывать компоненты тем, кому их видеть не нужно?...
    Ответ написан
    3 комментария
  • Почему гугл не индексирует компоненты VUE?

    dlnsk
    @dlnsk
    ПК Партнер 01.01 -> ПК Поиск -> IBM PC
    А чего вы, собственно, хотели? Боты - они же простые как три рубля. Их задача быстренько индексировать страницу. Представьте сколько нужно ресурсов, чтобы исполнять JS на каждой странице... Да и зачем? Если разработчику нужно индексировать Vue, то он потратит на это свои ресурсы.
    То, о чем вы пишите, называется SSR. Не знаю в каких таких "статьях" вы читали про гугл, но есть официальная дока про SSR на сайте Vue:
    https://ssr.vuejs.org/ru/
    Ответ написан
    Комментировать
  • Как организовать социальную аутентификацию через Socialite(Laravel)+JWTAuth+Vue.js без редиректа с API-сервера?

    dlnsk
    @dlnsk
    ПК Партнер 01.01 -> ПК Поиск -> IBM PC
    Работает у меня такая схема и в Ionic и в NativeScript.
    В общем схема везде одинаковая.
    Ionic:
    На Laravel нужен Socialite, на клиенте что-то в соответствии с фреймворком. Я использовал ng2-ui-auth. Еще вам нужно установить плагин InAppBrowser.
    Последовательность такая:
    1. В своем приложении вы жмете на кнопку "Войти через GitHub"
    2. Открывается InAppBrowser окно входа GitHub (в урле передается clientId вашего приложения и redirectUri, за это отвечает ng2-ui-auth).
    2а. Обратите внимание что redirectUri из запроса должен быть идентичен Authorization callback URL в настройках вашего приложения на сайте GitHub (Settings / Developer settings / OAuth Apps) и в случае Cordova должен быть равен "localhost:3000".
    3. GitHub авторизирует вас по логину/паролю, спросит разрешения передавать данные Приложению и редиректит страницу на redirectUri добавляя к нему токен.
    4. ng2-ui-auth перехватывает обращение к localhost:3000 (это делается с помощью JS, тут нет никакого локального сервера), достает токен и пересылает его на конечный url (указывается для каждого провайдера в настройках ng2-ui-auth).
    4а. Вот этот конечный url должен быть адресом вашего backend'а, а именно метода, который с помощью Socialite будет запрашивать данные пользователя у GitHub.
    5. С помощь Socialite вы получаете данные о пользователе у GitHub. Создаете пользователя в Laravel, если его нет, и делаете любые другие необходимы действия.
    6. Используя данные пользователя с помощью jwt-auth создаете jwt-токен и возвращаете его клиенту (в пункт 4).
    7. На клиенте запоминаете jwt-токен и тот факт, что пользователь аутентифицирован. Из ответа можете достать email (если вы его передали) и где-нибудь отобразить.
    Все!

    С NativeScript все абсолютно аналогично (там на клиенте я использую nativescript-oauth2) за исключением одного: в NS нет webview, поэтому перехват redirectUri выглядит по-другому:
    1. В Authorization callback URL на GitHub вы пишите что-то вроде blablabla://auth (вместо blablabla какая-то длинная уникальная строка - urlScheme).
    2. Эта urlScheme также пописывается в настройках nativescript-oauth2 и в App_Resources/Android/src/main/AndroidManifest.xml в виде intent-filter
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="blablabla" />
    </intent-filter>

    Приложение перехватывает обращение к этой уникальной urlScheme и дальше все продолжается согласно списка.
    Ответ написан
    1 комментарий
  • Что по вашему мнению стоит учить Vue.js или Angular?

    dlnsk
    @dlnsk
    ПК Партнер 01.01 -> ПК Поиск -> IBM PC
    Angular открывает прямую дорогу к ionic, а это мобильные приложения почти для всех платформ.
    Ответ написан