В этом руководстве мы увидим, как быстро создать веб-приложение с системой аутентификации с использованием Vue 2, vue-router и Firebase.

10.11.2018: Я только что обновил это руководство, чтобы его можно было использовать с великолепным Vue Cli 3 и последней версией Vue. Все исходники предыдущей версии по-прежнему доступны в репозитории Github (github.com/CaptainYouz/vue-firebase-tutorial) до тега update-vue-cli.

Что такое Vue.js?

Вот обзор этого удивительного и легкого JavaScript-фреймворка:

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects
from vuejs official documentation: https://vuejs.org/v2/guide

Почему именно Vue.js?

Vue.js очень прост в использовании, мощен и хорошо документирован. В эпоху новых фреймворков javascript, основанных на компонентах, Vue выделяется своей простотой и производительностью. Экосистема динамична, и каждый день все больше и больше людей переходят на Vue.

Если вы хотите глубже понять, почему вам следует использовать Vue.js, вы можете проверить это сравнение с другим фреймворком javascript: https://vuejs.org/v2/guide/comparison.html

Что такое Firebase?

Firebase is a mobile and web application development platform. Firebase is made up of complementary features that developers can mix-and-match to fit their needs. [...] Firebase's initial product was a realtime database, which provides an API that allows developers to store and sync data across multiple clients. Over time, it has expanded its product line to become a full suite for app development.
from wikipedia: https://en.wikipedia.org/wiki/Firebase

Вкратце, Firebase - это набор инструментов, который позволяет разрабатывать приложение без программирования на стороне сервера. Он имеет базу данных в реальном времени, систему аутентификации, отчеты о сбоях, аналитику и другие сервисы, готовые к использованию в вашем мобильном / веб-приложении. Таким образом, вы можете сосредоточиться на своем приложении и пользователях.

Почему именно Firebase?

Для приложений с минимальными внутренними потребностями, такими как аутентификация или хранение базы данных, нет необходимости заново изобретать колесо, Firebase сделает это за вас и предоставит вам гораздо больше инструментов. Кроме того, вам не нужно беспокоиться о масштабировании, производительности сервера и размере базы данных, Firebase масштабирует все автоматически.

Давайте начнем !

Во-первых, мы собираемся инициализировать новый проект Vue с помощью замечательного инструмента Vue Cli 3 (https://github.com/vuejs/vue-cli). .

Если у вас еще не установлен vue cli, давайте установим его:

$ npm install -g @vue/cli

Теперь, когда у вас установлен vue cli, давайте создадим новый проект. В документации vue cli сказано:

Usage
$ vue create <project-name>

Одна из замечательных особенностей Vue Cli 3 заключается в том, что вы можете инициализировать свой проект с нулевой конфигурацией, чтобы вы могли начать код как можно быстрее.

Давайте создадим наш новый проект Vue и назовем его «vue-firebase-tutorial».

$ vue create vue-firebase-tutorial

Вам будет предложено выбрать предустановку. Вы можете либо выбрать предустановку по умолчанию, которая поставляется с базовой установкой Babel + ESLint, либо выбрать «Выбрать функции вручную», чтобы выбрать нужные вам функции.

В нашем случае мы собираемся выбрать «Выбрать функции вручную» и выбрать vue-router вариант , поскольку мы будем использовать его в этом руководстве. . Что касается других функций, делайте то, что хотите, так как это не имеет особого значения для остальной части руководства.

В конце вас спросят, хотите ли вы сохранить этот пресет для будущих проектов, и после этого ваш проект будет инициализирован.

Затем войдите в новый каталог vue-firebase-tutorial и запустите npm run serve

$ cd vue-firebase-tutorial
$ npm run serve

Теперь, если вы откроете URL-адрес «http: // localhost: 8080», у вас должен быть вид по умолчанию для нашего проекта Vue!

Структура приложения

Давайте взглянем на структуру приложения.

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

Остальные файлы - это в основном файлы конфигурации, созданные Vue Cli 3. Если вы хотите получить полный обзор структуры, вы можете проверить документацию Vue Cli 3.

Кроме того, прежде чем продолжить изучение этого руководства, если вы еще не знаете структуру файла Vue (например, src / components / HelloWorld.vue), я советую вам взглянуть на это: https: // vuejs. org / v2 / guide / single-file-components.html

НАПИШЕМ КОД!

Наша будущая архитектура приложений

Наше приложение будет состоять из трех представлений: двух (Вход и Регистрация), к которым мы можем получить доступ только без аутентификации, и одного (Домашняя страница view), к которому мы можем получить доступ только с аутентификацией.

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

Шаг первый: войдите в систему и зарегистрируйтесь

1–1 Представление входа

Давайте создадим представление Вход. Для этого мы создадим новый компонент Vue под названием Login в src/views

На данный момент компонент будет просто состоять из заголовка, двух полей ввода, кнопки и небольшого предложения в html.

Наш компонент создан! Но как отобразить этот новый компонент в нашем приложении? Что ж, для этого мы будем использовать vue-router . Помните? Мы уже установили его, когда инициализировали приложение с помощью vue-cli .

Что такое vue-router?

vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. 
Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them.
from vue-router documentation: https://github.com/vuejs/vue-route

Итак, давайте добавим наш новый компонент Login , который мы только что создали, в маршрутизатор нашего приложения. Откройте файл src/router.js и добавьте к маршрутизатору компонент Login следующим образом:

Затем, если вы измените URL-адрес своего браузера на localhost:8080/#/login, вы должны увидеть новый компонент Login , который мы только что создали, отображаемый в вашем браузере:

Почему у нас все еще есть меню по умолчанию, несмотря на то, что мы не поместили его в html-шаблон компонента Login ? Итак, если вы откроете файл App.vue, шаблон компонента Приложение будет следующим:

Компонент Приложение является основным компонентом приложения и будет отображаться первым. Он содержит div с двумя элементами router-link и html-компонент под названием router-view.

Вскоре мы поговорим об элементе router-link, но сначала давайте посмотрим, что такое элемент router-view.

Router-view - это компонент vue-router :

The <router-view> component is a functional component that renders the matched component for the given path. Components rendered in <router-view> can also contain its own <router-view>, which will render components for nested paths.
from vue-router documentation https://router.vuejs.org/en/api/router-view.html

Таким образом, при достижении http://localhost:8080/#/login vue-router отобразит присоединенный компонент пути/login, который мы определили в src/router.js внутри компонента router-view. А поскольку компонент App также содержит div div с двумя элементами router-link в своем шаблоне, у нас также есть их отображение в нашем представлении.

Чтобы избежать путаницы с навигацией в приложении, которое мы создаем, давайте удалим этот div div из компонента App и заменим его логотипом vue. У нас уже есть логотип Vue в каталоге src / assets /, так что давайте его использовать!

Кроме того, поскольку мы не собираемся использовать представление О программе, мы можем удалить файл из нашего каталога (src/views/About.vue), а также удалить его из конфигурации наших маршрутов в src/router.js

Теперь вернемся к нашему представлению Вход и добавим стиль в наш компонент Вход. Добавьте эти стили в элемент <style> вашего Login.vue файла.

Теперь страница входа должна быть немного красивее.

1-2- Просмотр регистрации

Таким же образом, как мы создали представление Вход, мы собираемся создать представление Зарегистрироваться.

Для этого создайте новый компонент vue под названием SignUp в разделе src/views/.

Что касается компонента Вход, то компонент Вход на данный момент будет состоять из простой формы и определенного стиля, прикрепленного к ней.

Затем добавьте новый компонент в наши маршруты внутри src/router.js

Затем, если вы откроете в браузере http://localhost:8080/#/sign-up, у вас должно появиться следующее представление:

Шаг 2. Навигация между представлениями

Если мы вернемся к схеме архитектуры приложения, которую мы определили, мы можем перейти от представления Login к представлению SignUp, а от этих двух представлений к Домашний вид. Как это сделать?

Что ж, мы будем использовать другой компонент vue-router , который мы быстро видели раньше, под названием router-link.

<router-link> is the component for enabling user navigation in a router-enabled app. The target location is specified with the to prop. It renders as an <a> tag with correct href by default, but can be configured with the tag prop. In addition, the link automatically gets an active CSS class when the target route is active.
from vue-router documentation: https://router.vuejs.org/en/api/router-link.html

Итак, в компонентах Вход и Регистрация давайте реализуем router-link, чтобы мы могли перемещаться между этими двумя представлениями.

Теперь у вас должна быть возможность перемещаться между двумя страницами, используя только что созданные ссылки.

Последняя часть навигации будет состоять в переходе от представлений Вход / SignUp к представлению Домашняя страница. На данный момент, поскольку у нас нет реализованного кода, мы сделаем простое перенаправление в представление Домашняя страница при нажатии кнопки Connection без какой-либо проверки аутентификации.

В router-link навигация происходит в html-части компонента, но теперь мы хотим перемещаться между маршрутами программно. Для этого нам нужно прикрепить событие при нажатии кнопки Connection, а с Vue 2 мы можем сделать это с помощью директивы v-on или с помощью псевдонима @ для директивы v-on.

Listening to Events
We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.
from Vue 2 doc: https://vuejs.org/v2/guide/events.html#Listening-to-Events

Событие, которое мы хотим прослушать, - click. Итак, при нажатии кнопки Connection мы хотим перейти к представлению Hello.

Для программного перехода между представлениями vue-router имеет набор функций, которые мы можем использовать в нашем приложении. Чтобы узнать больше об этих функциях, загляните в их документацию https://router.vuejs.org/en/essentials/navigation.html.

В нашем примере мы собираемся использовать функцию replace, потому что после входа пользователя в систему мы хотим, чтобы представление Hello было нашим начальным маршрутом.

Давайте изменим наш компонент Вход, чтобы добавить его.

Вы можете видеть внутри функции login, которая у нас this.$router.replace('home')

Почему мы получаем доступ к маршрутизатору с this? Если вы посмотрите файл main.js, вы увидите, что объект маршрутизатора внедрен в приложение Vue. Таким образом, мы можем легко получить к нему доступ во всех компонентах приложения.

Кроме того, мы изменили навигацию на home, но у нас пока нет пути приветствия.

Путь по умолчанию для компонента Home был / при инициализации приложения, но теперь, когда мы знаем, что представление Home будет доступно только после аутентификации пользователя, давайте изменим маршрут. чтобы представление Домашняя страница было доступно при достижении пути /home.

Теперь вернемся к нашему представлению Вход. Если вы нажмете кнопку Connection, вы будете перенаправлены в представление Домашняя страница! Вы увидите два логотипа Vue. Это нормально ! Проверьте содержимое компонента HelloWorld в src/components/HelloWorld.vue;). Удалите изображение из шаблона компонента HelloWorld, чтобы избежать дублирования логотипа Vue.

Шаг третий: интеграция с Firebase

Теперь, когда у нас готово интерфейсное приложение, давайте реализуем Firbase, чтобы использовать его систему аутентификации!

3.1 Создайте новый проект в Firebase

Чтобы использовать Firebase, вам сначала нужно создать новый проект в консоли Firebase. Если у вас еще нет учетной записи, создайте ее и перейдите на console.firebase.google.com.

Щелкните Add project. В них у вас должно появиться всплывающее окно для создания нового проекта. Выберите желаемое имя. Я называю это vue-firebase-tutorial

Затем вы должны перейти на домашнюю страницу вашего проекта.

Поздравляю ! Ваш проект Firebase создан. Теперь, чтобы интегрировать его в наше приложение, щелкните Add Firebase to your web app.

Должно появиться всплывающее окно с фрагментом кода. Скопируйте код внутри второго скрипта balise. Должно получиться так:

// Initialize Firebase
let config = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SEND_ID"
};
firebase.initializeApp(config);

А теперь вернемся к нашему проекту vue. Нам нужно добавить в наш проект модуль Firebase. Для этого:

$ npm install ——save firebase

После завершения установки давайте импортируем модуль Firebase в наше приложение. Откройте файл main.js и инициализируйте Firebase с кодом конфигурации, который мы скопировали ранее.

Для простоты руководства мы поместили конфигурацию Firebase в файл main.js, но в реальной производственной системе этого не следует делать и помещать в специальный файл конфигурации. Кроме того, вы можете увидеть в консоли некоторые предупреждения Firebase об импорте только той части SDK, которую мы фактически используем. В производстве вы обязательно должны это сделать! Но опять же, чтобы сохранить простоту этого урока, я пропускаю эту часть.

Теперь у нас есть все готово для создания новых пользователей в Firebase!

3.2 Создание пользователя в Firebase с помощью компонента SignUp

Вернемся к нашему компоненту SignUp и реализуем то, что нам нужно для создания пользователей в Firebase.

Чтобы создать нового пользователя, нам нужно будет вернуть email и password, введенные в нашу форму внутри нашего контроллера компонентов. Для этого мы собираемся использовать директиву v-model Vue 2.

You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
from Vue 2 documentation: https://vuejs.org/v2/guide/forms.html

После получения email и password нового пользователя, которого мы хотим создать, мы будем использовать функцию Firebase под названием createUserWithEmailAndPassword.

Эта функция Firebase делает именно то, что написано в названии: она создает нового пользователя с адресом электронной почты и паролем. Вы можете узнать больше об этой функции в официальной документации Firebase здесь: https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createUserWithEmailAndPassword

Давайте добавим все это в наш компонент SignUp:

Функция createUserWithEmailAndPassword возвращает обещание Firebase с обратным вызовом onResolve и onReject. Вы можете узнать больше о различных типах обещаний Firebase здесь: (https://firebase.google.com/docs/reference/js/firebase.Promise).

На данный момент мы просто отображаем предупреждение, чтобы увидеть результат функции.

Попробуем создать нового пользователя в интерфейсе.

Это не работает ! Почему ?

В сообщении об ошибке говорится:

The given sign-in provider is disabled for this Firebase project. Enable it in the Firebase console, under the sign-in method tab of the Auth section.

Чтобы иметь возможность создать нового пользователя, мы должны включить поставщика входа в Firebase. Вернемся к консоли Firebase к проекту, который мы создали на шаге 3.1.

В части Authentication у нас есть вкладка с именем SIGN-IN METHOD

Вам просто нужно включить Email/Password провайдера.

Затем давайте попробуем еще раз создать нового пользователя в нашем приложении Vue.

Теперь работает ! Поздравляем, вы только что создали нового пользователя в своем проекте Firebase!

Чтобы убедиться, что все было правильно, мы можем заглянуть в консоль firebase в разделе Authentication и увидеть список пользователей. У вас должен быть в списке только что созданный пользователь!

3.3 Войдите в систему под новым пользователем

Теперь, когда у нас есть новый пользователь, давайте попробуем войти под этим пользователем! (Когда вы успешно создаете нового пользователя в Firebase, он автоматически входит в систему в приложении, но для этого примера мы собираемся снова войти в систему из представления Вход)

Вернемся к нашему компоненту Вход. Нам нужно вернуть email и password пользователя, который пытается войти в систему, и войти этого пользователя в Firebase. Этот компонент будет выглядеть как компонент SignUp, но изменением будет функция, которую мы будем вызывать. Чтобы войти в систему в Firebase, мы воспользуемся функцией signInWithEmailAndPassword, предоставляемой Firebase. Он принимает email и password в качестве параметров и возвращает обещание Firebase.

Теперь давайте попробуем войти в систему с пользователем, которого мы только что создали.

Работает ! Теперь ваш пользователь аутентифицирован в Firebase!

Шаг 4. Доступ к приложению только с аутентификацией

4.1. Добавление мета-полей к маршрутам

Теперь мы аутентифицированы! Но ничего не происходит, правда? Что ж, нам нужно перенаправить пользователя в ту часть приложения, к которой можно получить доступ, только если пользователь аутентифицирован. Мы уже определили в нашей (красивой) схеме, что аутентифицированным представлением нашего приложения будет представление Home.

Чтобы реализовать это в нашем приложении Vue, мы можем использовать поле meta в vue-router. Поле мета - это дополнительная информация, которую вы можете указать для своего маршрута.

Чтобы узнать больше о мета, вы можете проверить документацию по vue-router здесь: https://router.vuejs.org/en/advanced/meta.html

Давайте добавим поле meta в представление Home, которое мы будем использовать в этом примере. Эта мета будет называться requiresAuth и сообщит нам, что это представление требует аутентификации.

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

С path: ‘*’ мы перенаправляем все пути, которые не существуют, в представление Login. Если пользователь аутентифицирован, поскольку страница входа не будет доступна, когда пользователь вошел в систему, она автоматически перенаправит представление в представление Hello.

Теперь вы можете попробовать ввести неправильный URL, и вы увидите, что он будет перенаправлен в представление Вход.

4.2: Перенаправить маршруты, если пользователь аутентифицирован

Теперь, когда у нас все готово, нам нужно знать, аутентифицирован ли пользователь в Firebase. Для этого Firebase предоставляет функцию для возврата текущего пользователя: firebase.auth (). CurrentUser

Эта функция отправляет обратно текущего вошедшего в систему пользователя с помощью свойства currentUser. Если пользователь не вошел в систему, currentUser имеет значение null.

В предыдущей части мы установили поля meta для наших маршрутов, чтобы мы могли знать, какое представление требует аутентификации, чтобы быть доступным.

Теперь нам нужно проверить перед доступом к каждому представлению, аутентифицирован ли пользователь и требуется ли аутентификация для представления, к которому мы хотим получить доступ.

Для этого воспользуемся навигационными щитами vue-router.

Navigation Guards
As the name suggests, the navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.
from vue-router documentation: https://router.vuejs.org/en/advanced/navigation-guards.html

В нашем примере мы собираемся использовать глобальную навигационную защиту beforeEach.

Давайте реализуем это в нашем src/router/index.js файле.

Функция beforeEach принимает три параметра: to, from и next и будет вызываться всякий раз, когда запускается навигация.

  • Параметр to - это целевой объект маршрута, к которому выполняется навигация.
  • from параметр - текущий маршрут, от которого выполняется навигация.
  • Параметр next - это функция, которая должна быть вызвана для разрешения перехвата, и может принимать аргумент для перенаправления или прерывания навигации (подробнее см. В документации)

В функции beforeEach мы возвращаем currentUser Firebase и проверяем, требуется ли аутентификация для маршрута, по которому мы хотим пройти, проверяя, имеет ли объект маршрута мета requiresAuth.

Чтобы понять, как мы возвращаем мета requiresAuth, нам сначала нужно знать, что каждый объект маршрута в конфигурации routes называется записью маршрута. В нашем руководстве у нас нет вложенных маршрутов, но записи маршрута могут быть вложенными. Следовательно, когда маршрут совпадает, он потенциально может соответствовать более чем одной записи маршрута.

Все записи маршрута, соответствующие маршруту, отображаются в объекте $route (а также в объектах маршрута в средствах навигации) в виде массива $route.matched. Следовательно, нам нужно перебрать $route.matched, чтобы проверить мета-поля в записях маршрута.

Итак, в нашей глобальной функции защиты навигации внутри объекта маршрута to мы ищем, есть ли в массиве matched несколько записей (в нашем случае одну) с requiresAuth мета.

Затем мы определили наши правила навигации!

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

Если маршрут, по которому мы переходим, не требует аутентификации и есть пользователь, вошедший в систему, мы перенаправляемся в представление Домашняя страница.

Иначе продолжаем навигацию.

Теперь мы должны иметь доступ к приложению только тогда, когда пользователь аутентифицирован!

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

Попробуем перезагрузить страницу.

Ничего не происходит ! Мы по-прежнему находимся в режиме просмотра Вход.

Почему ?

Ну, это просто потому, что в жизненном цикле нашего приложения выполнение нашего средства навигации beforeEach происходит до завершения инициализации Firebase. Итак, когда мы впервые загружаем приложение, поскольку модуль Firebase не завершил свою инициализацию, firebase.auth (). CurrentUser вернет значение null!

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

Как избежать этого сценария и убедиться, что перенаправление происходит непосредственно при первой загрузке приложения?

Что ж, Firebase дает нам возможность установить наблюдателя для объекта Auth, чтобы мы могли гарантировать, что объект Auth не находится в промежуточном состоянии - таком как инициализация - когда вы получаете текущего пользователя.

Этот наблюдатель называется onAuthStateChanged. (подробнее о наблюдателе можно узнать в документации Firebase: https://firebase.google.com/docs/auth/web/manage-users#get_a_users_profile)

Итак, установив обратный вызов для наблюдателя onAuthStateChanged, мы можем инициализировать приложение Vue только тогда, когда мы уверены, что Firebase инициализирована.

Давайте изменим наш src/main.js файл следующим образом:

Теперь мы инициализируем приложение только тогда, когда уверены, что объект Firebase Auth готов к использованию.

Теперь, если вы обновите страницу или попытаетесь получить доступ к просмотру Login или SignUp с URL-адреса, вы увидите перенаправление в действии!

4.3. Перенаправление после входа в систему / регистрации и выхода из приложения

Теперь, когда у нас есть система аутентификации, нам все еще нужно перенаправить пользователя после входа в систему или при создании нового пользователя. Кроме того, мы хотим иметь возможность выйти из Firebase.

Чтобы выйти из системы, давайте просто добавим кнопку в наш компонент Домашняя страница и прикрепим событие для выхода из Firebase.

Как и signInWithEmailAndPassword и createUserWithEmailAndPassword, Firebase предоставляет функцию выхода из системы под названием signOut, которая возвращает обещание . После завершения функции Выход мы перенаправим приложение в представление Вход.

Теперь, когда мы нажимаем на кнопку, мы выходим из Firebase и возвращаемся в представление Вход.

Чтобы быть уверенным, что вы вышли из Firebase, вы можете обновить страницу или попытаться получить доступ к представлению Домашняя страница.

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

Теперь попробуйте войти в систему, и вы должны будете перенаправлены в представление Домашняя страница.

Давайте реализуем то же самое для компонента SignUp.

Теперь, после создания новой учетной записи, пользователь также будет перенаправлен в представление Домашняя страница!

Вы могли заметить, что я включил функции обратного вызова в signInWithEmailAndPassword, createUserWithEmailAndPassword и signOut в стрелочных функциях ES6. Почему ?

Просто потому, что определение метода (function name() {}) имеет свой собственный this контекст. Если бы мы использовали определение метода, мы не смогли бы получить доступ к this.$router внутри наших обратных вызовов. Мы должны были инкапсулировать объект this родительского метода внутри переменной для доступа к нему.

Для стрелочной функции ES6 this является лексическим, что означает, что он не создает свой собственный this контекст. Вместо этого this имеет исходное значение из окружающего контекста.

Используя стрелочную функцию ES6, мы можем получить доступ к this.$router и разрешить перенаправление.

Конец

Теперь у нас есть небольшое приложение Vue, использующее систему аутентификации Firebase!

Все исходники доступны на Github: github.com/CaptainYouz/vue-firebase-tutorial.

А если вы хотите узнать, как реализовать функцию входа в социальные сети в Firebase, вы можете ознакомиться с частью II этого руководства! ;)

Обновление - сентябрь 2018 г. - - - -

Всем привет!

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

Но сегодня я хотел бы продолжить этот проект и сделать его первым из серии руководств по Vue.js и Firebase. Итак, если у вас есть какие-либо мысли или идеи, я хотел бы услышать их от вас!

Анас.