Обновление 01.05.2018 Quasar v0.15
Некоторые люди просили меня выполнить аутентификацию с помощью Quasar 0.15, поэтому я сделал этот репозиторий, я улучшил обработку ключей API, а также добавил немного сахара в объявление маршрутов в приложении с помощью vue-routisan.
В большинстве случаев я слышал, что сложно аутентифицировать клиента в одностраничных приложениях (SPA) с помощью токена доступа (OAuth 2.0), поэтому сегодня мы увидим, как реализовать это.
Давайте начнем!
Прежде чем начать, я хочу упомянуть, что у нас будет API на основе Laravel 5.4 и клиент на основе VueJS. И я предполагаю, что вы настроили Laravel для доставки access_tokens, а также Cross-Origin Resource Sharing (CORS).
Если вы этого не сделали, я рекомендую вам посмотреть это видео Тейлора Отвелла.
Возможно, когда вы попытаетесь запросить токен доступа, вы получите следующую ошибку:
XMLHttpRequest cannot load http://localhost:800/api/users/user.
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8000' is therefore not allowed access.По этой проблеме проверьте это руководство.
Ресурсы и пакеты, использованные в этом посте
- NodeJS 8.4.0
- NPM 5.3.0
- Laravel 5.4
- VueJS 2.4.2
- Quasar-cli (глобально устанавливается npm install quasar-cli -g)
- Axios
- Vue-Router
- Vue Devtools
Создание каркаса Vue
Для создания каркаса этого проекта мы будем использовать Quasar. Quasar - это платформа для создания веб-приложений, мобильных приложений для Android и iOS (с использованием Cordova) и приложений Electron (кроссплатформенные настольные приложения).
Поскольку мы установили quasar -cli, запустим в терминале
$ quasar init vue-app
Здесь мы создаем проект под названием vue-app, если все в порядке, мы должны увидеть что-то вроде изображения ниже:
Затем откройте папку vue-app и запустите npm install. По завершении npm запустите: quasar dev.
Вы должны увидеть что-то вроде этого
Создание файла начальной загрузки
Учитывая, что у нас есть следующая структура, мы создадим новую папку bootstrap,, а затем файл index.js f (src / bootstrap / index.js ). В этот файл будут введены все конфигурации.
bootstrap / index.js
Эта структура принадлежит плагину Vue, проверьте эту ссылку для получения дополнительной информации.
Чтобы внедрить этот плагин в Vue, мы перейдем в src / main.js и добавим:
импортировать Bootstrap из ‘./bootstrap’
Vue.use (бутстрап)
Чтобы убедиться, что плагин работает, проверьте свою консоль, вы должны увидеть текст «Bootstrapping»
Примечание. Журнал появляется 10 раз, потому что этот плагин внедрен во все компоненты vue.
Создание файла конфигурации oAuth
При разработке вы можете использовать три среды: локальную, среду разработки и производственную, чтобы упростить переключение между средами, вы должны создать файл, в котором будут храниться учетные данные oauth.
Создание класса OAuth
Теперь мы создаем новый файл в новой папке: oauth / index.js
Если мы обратим внимание на каждый метод предыдущего класса, мы увидим методы для входа в систему, получения текущего пользователя (getUser), проверки наличия активного сеанса (isAutheticated), а также выйти.
Хорошая часть заключается в том, что вы можете использовать экземпляр этого класса в любом файле в нашем приложении для входа в систему или. Однако, если мы хотим использовать его в компоненте Vue, я думаю, что лучше создать помощника, позвольте мне показать вам, о чем я говорю:
таким образом, мы можем использовать его в каждом компоненте через this. $ oauth
Файл службы OAuth
Если мы проверим строку 9 файла oauth / index.js, в котором мы импортировали службу, этот файл используется для выполнения запросов к нашему серверу.
api / routes.js
По сути, у нас есть класс Auth, в котором есть служба для выполнения запросов, а также файл, в котором хранятся наши HTTP-маршруты.
С этими последними изменениями мы можем реализовать компонент Login.vue для аутентификации пользователя:
А затем создайте новый маршрут для этого представления:
После того, как вы создали этот файл, вы можете получить ошибку npm, говоря, что sass-loader не существует, просто запустите:
npm install sass-loader node-sass - save-dev
Тогда мы должны увидеть это:
Учетные данные API GrantType
Вы помните файл src / config / auth.js? Что ж, в этот файл мы добавим client_id, client_secret, а также тип предоставления. В этом случае, поскольку мы работаем локально, мы должны установить свойство API_LOCAL
Аутентификация пользователя
сосредоточимся на сегменте кода:
В этом коде мы пытаемся войти в систему, в случае успешного входа мы будем перенаправлены на «/», в противном случае будет отображаться тост с «Неверный адрес электронной почты или пароль».
И вот и все !!! Если мы вошли в систему правильно и хотим убедиться, что наш токен доступа сохранен, мы можем проверить это в консоли Google Chrome. Вы можете использовать LocalStorage или Cookies, лично мне нравятся Cookies, однако, если вы планируете обернуть свое приложение в Android или iOS, вы должны использовать LocalStorage.
Помните, что если вам нужно переключаться между этими двумя, вы можете изменить это в
src / config / auth.js ›default_storage
Решение ошибки 401 Unauthorized
Теперь, когда мы успешно вошли в систему и хотим получить информацию о текущем пользователе, мы получаем эту ошибку:
Причина в том, что мы не отправляем заголовок авторизации в каждом запросе, для этого мы создадим новую папку interceptors, а затем файл axios.js
Наконец, нам нужно вставить его в наш файл начальной загрузки src / bootstrap / index.js
Если мы обновимся и попробуем снова, мы сможем увидеть текущего пользователя:
Выйти
Если мы хотим выйти, результат будет в следующем примере. Предположим, мы находимся в основном представлении (в этом примере Hello.vue).
Для успешного выхода из системы мы используем наш помощник $ oauth, и, пользуясь преимуществами этого класса, мы также получаем текущего пользователя. Это представление будет примерно таким:
Защита ваших маршрутов
Я очень уверен, что вам нужно будет защитить некоторые представления от незарегистрированных пользователей, что очень важно для нашего приложения, для этого мы создаем еще один перехватчик, предоставляемый vue-router, но сначала мы добавляем новое свойство (мета) в маршрут, который вы хотите защитить.
Затем мы создаем новый файл в src / interceptors / v-router.js
И, наконец, мы импортируем его в наш файл начальной загрузки:
Вот и все! Теперь, когда вы хотите получить доступ к http: // localhost: 8080 / # / и не вошли в систему, вы будете перенаправлены на http: // localhost: 8080 / # / login .
Заключение
Возможно, процесс, который мы сделали, немного запутан, но когда вы захотите изменить настройку, это будет легко изменить. Например:
- Чтобы выбрать между LocalStorage или файлами cookie, используемыми для хранения нашего access_token.
- Легко изменить среду, локальную, девелоперскую, производственную.
- Легко обрабатывайте перехватчики, где мы можем преобразовать наши запросы или проверить, должен ли один конкретный маршрут отображаться только для аутентифицированных пользователей.
