Аутентификация Firebase в Vue.js 2 с VueFire

Firebase предоставляет очень простой способ настроить аутентификацию в ваших приложениях. Здесь мы узнаем, как настроить простой рабочий процесс аутентификации для приложений VueJS 2+ с использованием библиотеки Vuefire.

Vuefire делает жизнь еще проще, давая прямую umschlüsselung и обновления для объектов firebase через систему реактивности Vue.

Установка и настройка

Установите firebase и Vuefire в свой проект Vue.js через NPM или Yarn.

# NPM
$ npm install firebase vuefire -s
# Yarn
$ yarn add firebase vuefire

Затем в главном файле приложения включите плагин VueFire.

File main.js

import './firebase';
import Vue from 'vue';
import App from 'App.vue';
import VueFire from 'vuefire';
Vue.use(VueFire);
new Vue({
  el: '#app',
  render: h => h(App)
});

Инициируйте соединение с Firebase

Теперь нам нужно инициализировать соединение firebase, для этого создадим файлfirebase.js и инициируем в нем соединение firebase.

File firebase.js

import Firebase from 'firebase'
const firebaseApp = Firebase.initializeApp({
    // Your firebase configuration data here....

});
// Export the database for components to use.
export const db = firebaseApp.database();

Теперь мы можем получить доступ к данным в нашей базе данных Firebase прямо из компонентов Vue.

File app.vue

<template>
  <p v-for="book of books">
    {{book.name}}
  </p>
</template>
<script>
import {db} from './firebase';
export default {
  data() {
    return {
      books: {}
    }
  },
firebase: {
    books: {
      source: db.ref('books'),
      // error handeling.
      cancelCallback(err) {
        console.error(err);
      }
    }
  }
}
</script>

Всякий раз, когда коллекция книги обновляется, объект данных книги также обновляется на клиенте. Как это для бесшовной реактивной базы данных?

Изменение данных

Вы можете изменять массивы как обычно в this.$firebaseRefs. (т.е. this.$firebaseRefs.books.push({name: 'Tom Bombadil'})).

Применяются обычные правила реактивности Vue и предостережения.

К сожалению, изменение объектов может быть немного сложнее. Это нужно делать вручную, напрямую используя firebase ref.

updateBookName(book, newName) {    this.$firebaseRefs.books.child(book['.key']).child('name').set(newName);
}
// Function to remove a book
removeBook(book) {
  this.$firebaseRefs.books.child(book['.key']).remove()
}

Важные ссылки

Сайт Vuefire

Документы Firebase.

#HappyCoding & Keep 😊!