Impor juga [`axios`](https://github.com/axios/axios) agar dapat mengirim permintaan HTTP ke server:

 import axios from 'axios'

Sebelum kita melanjutkan, kita perlu menambahkan beberapa aturan ke database untuk dapat memvalidasi email sebagaimana mestinya, seperti yang terlihat di bawah ini:

 "read" = "true"

Artinya database dapat dibaca tanpa hambatan dari sisi klien.

 "write" = "auth" !== null

Anda tidak dapat menulis di database kecuali Anda adalah pengguna yang diautentikasi.

 "Users" = { "onIndex" : ["email"] }

Ini memungkinkan kita untuk menanyakan dokumen `pengguna` dengan indeks `email`. Artinya, Anda benar-benar dapat memfilter database untuk email unik. Kemudian tambahkan properti terkomputasi kustom dengan nama `validations` sama seperti kita memiliki metode, computed, dll. Di bawah `validations` kita akan memiliki metode untuk memvalidasi data yang diperlukan mulai dari `email` yang diperlukan dan jelas harus berupa email . Selain itu, kami ingin dapat memberi tahu pengguna ketika email telah diambil oleh orang lain, dengan memeriksa database setelah pengguna mengetiknya menggunakan sesuatu yang disebut validator async semua dalam validator khusus dan semuanya didukung oleh [vuelidate. ](https://vuelidate.js.org/#sub-asynchronous-validation) Kemudian di bawah unique, kueri database menggunakan axios dan gunakan Object.keys default untuk mengembalikan respons hanya jika panjangnya 0. Untuk usia, Anda akan menambahkan nilai wajib, numerik, dan minimal 18 yang ditetapkan ke `minVal ` sebagai propertinya.

 age: { required, numeric, minVal: minValue(18) }

Properti kata sandi diperlukan, dengan panjang minimal 6 ditetapkan untuk `minLen`.

 password: { required, minLen: minLength(6) }

Properti `confirmPassword` pada dasarnya harus sama dengan kata sandi.

 confirmPassword: { sameAs: sameAs(vm => { return vm.password }) }

Untuk memberi tahu pengguna bahwa email telah diambil, gunakan `v-if` untuk memeriksa apakah `unique` benar atau salah. Jika benar, berarti panjang Objek yang dikembalikan adalah 0, dan email masih dapat digunakan begitu juga sebaliknya. Dengan cara yang sama, Anda dapat memeriksa apakah input pengguna adalah email yang sebenarnya menggunakan `v-if`. Dan untuk semua div di sekitarnya pada input individual, kami akan menambahkan kelas invalid yang menjadi aktif setelah ada kesalahan pada input tersebut. Untuk mengikat peristiwa validasi ke setiap input dalam HTML, kami menggunakan [`$touch()`](https://vuelidate.js.org/#sub-without-v-model) seperti yang terlihat dengan `email ` di bawah. `Age`, `password`, dan `confirmPassword` akan diikat ke input HTML mereka dengan cara yang sama seperti `email`. Dan kami akan menonaktifkan tombol 'Kirim' jika ada kesalahan pada salah satu input.

 <button type="submit" :disabled="$v.$invalid">create</button>

Berikut [contoh CodePen](https://codepen.io/atanda1/pen/Yzyqrjv) lengkap untuk bagian vuelidate ini.

## Otentikasi Aplikasi ini adalah SPA dan tidak memuat ulang seperti situs tradisional, jadi kami akan menggunakan Vuex, sebagai "sumber kebenaran" tunggal kami untuk memungkinkan setiap komponen dalam aplikasi kami mengetahui status otentikasi umum. Kami pergi ke file toko kami, dan membuat metode sign-in/sign-up dalam tindakan. Respons (`token` dan `userId`) yang diterima saat kami mengirim data pengguna, akan disimpan dalam status kami. Ini penting karena token akan digunakan untuk mengetahui apakah kita masih masuk atau tidak pada titik mana pun dalam aplikasi kita. `token`, `userId`, dan pengguna dibuat dalam status dengan nilai awal nol. Kami akan membahas pengguna lebih lama lagi, tetapi untuk saat ini, kami akan fokus pada dua yang pertama.

 state: { idToken: null, userId: null, user: null }

Mutasi kemudian dibuat untuk mengubah keadaan bila diperlukan.

authUser	Menyimpan token dan userId
storeUser	Menyimpan info pengguna
clearAuthData	Menghapus data kembali ke keadaan awal

 mutations: { authUser (state, userData) { state.idToken = userData.token state.userId = userData.userId }, storeUser (state, user) { state.user = user }, clearAuthData (state) { state.idToken = null state.userId = null state.user = null } }

Untuk sign-up/sign-in, kita harus membuat tindakan individual untuk keduanya, di mana kita mengirim permintaan auth ke server. Setelah itu, respons kami (token dan userId) dari sign-up/sign-in dikomit ke authUser, dan disimpan di penyimpanan lokal. Tapi inilah bagian yang sulit, apa yang akan kita lakukan dengan tindakan pendaftaran khususnya adalah hanya mengirim email dan kata sandi untuk didaftarkan di database otentikasi. Dalam arti sebenarnya, kami tidak memiliki akses untuk menggunakan data dalam basis data autentikasi ini, dan kami tidak mengirimkan data pendaftaran apa pun selain email/kata sandi. Jadi yang akan kita lakukan adalah membuat tindakan lain untuk mengirim data pendaftaran lengkap ke database lain. Dalam dokumen database terpisah ini, kita akan memiliki akses lengkap ke semua informasi yang kita pilih untuk disimpan di sana. Kami akan memanggil tindakan baru ini yang disebut `storeUser` Kami kemudian pergi ke tindakan pendaftaran kami dan mengirimkan seluruh objek yang berisi data pendaftaran kami ke database yang sekarang kami akses melalui `storeUser`. **Catatan:** Anda mungkin tidak ingin mengirim sandi pengguna Anda dengan `storeUser` ke database untuk alasan keamanan. `storeUser` menambahkan kueri menggunakan token dan API basis data yang baru kami peroleh saat memposting ke basis data. Ini karena kami tidak dapat menulis ke database kami, kecuali kami diautentikasi dengan bukti kami (token). Itu aturan yang kami berikan pada Firebase di awal, ingat?

 “write” = “auth” !== null

Kode lengkap untuk tindakan sign-up/sign-in ada di sini [di sini](https://codepen.io/atanda1/pen/mdePKqj). Kemudian kirim sign-up dan sign-in dari komponennya dalam metode `onSubmit` ke tindakan masing-masing di store.

 methods : { onSubmit () { const signupData = { email : this.email, name : this.name, age : this.age, password : this.password, confirmPassword : this.co nfirmPassword } this.$store.dispatch('signup', signupData) } } }

**Catatan:** `signupData` berisi data formulir. ## AuthGuard Ada kebutuhan AuthGuard untuk mencegah pengguna yang tidak masuk mendapatkan akses ke dasbor tempat mereka akan mengirim survei. Buka file rute dan impor toko kami.

 import store from './store'

Di dalam rute, buka jalur dasbor dan tambahkan yang berikut:

 const routes = [ { path: '/', component: WelcomePage }, { path: '/signup', component: SignupPage }, { path: '/signin', component: SigninPage }, { path: '/dashboard', component: DashboardPage, beforeEnter (to, from, next) { if (store.state.idToken) { next() } else { next('/signin') } } } ]

Semua ini dilakukan untuk memeriksa apakah ada token di negara bagian, jika ya, kami memberikan akses ke dasbor dan sebaliknya. ## LogOut Untuk membuat opsi logout, kita akan menggunakan `clearAuth` yang telah kita buat sebelumnya di bawah `mutations` yang hanya menyetel `token` dan `userId` ke `null`. Kami sekarang membuat `logout` `action` baru, yang melakukan `clearAuth`, menghapus penyimpanan lokal dan menambahkan `router.replace('/')` untuk mengarahkan pengguna sepenuhnya.

 actions: { logout ({commit}) { commit('clearAuth') localStorage.removeItem('token') localStorage.removeItem('userId') router.replace('/') } }

Di komponen header, kami memiliki metode `onLogout` yang mengirimkan tindakan logout kami di toko.

 methods: { onLogout() { this.$store.dispatch('logout') } }

Kami kemudian menambahkan `@click` ke tombol yang mengaktifkan metode `onLogout` seperti yang dapat kita lihat [di sini](https://codepen.io/atanda1/pen/jObqKNd).

 <ul @click="onLogout">Log Out</ul>

## UI_State Sekarang setelah kita memberikan akses bersyarat ke dasbor, langkah selanjutnya adalah menghapusnya dari bilah navigasi, jadi hanya pengguna yang diautentikasi yang dapat melihatnya. Untuk melakukannya, kita akan menambahkan metode baru di bawah `getter` yang disebut `ifAuthenticated` yang memeriksa apakah token dalam status kita nol. Ketika ada token, itu menunjukkan bahwa pengguna diautentikasi dan kami ingin mereka melihat opsi dasbor survei di bilah navigasi.

 getters: { isAuthenticated (state) { return state.idToken !== null } }

Setelah itu, Anda kembali ke komponen header dan membuat metode `auth` di bawah computed, yang mengirimkan ke `isAuthenticated` kami di dalam `getter` yang baru saja kami buat di toko. Apa yang dilakukan adalah bahwa `isAuthenticated` akan mengembalikan false jika tidak ada token, yang berarti `auth` juga akan menjadi null dan sebaliknya.

 computed: { auth () { return this.$store.getters.ifAuthenticated } }

Setelah ini, kami menambahkan `v-if` ke HTML kami untuk memeriksa apakah `auth` adalah nol atau tidak, menentukan apakah opsi itu akan ditampilkan di bilah navigasi.

 <li v-if='auth'> <router-link to="/dashboard">Dashboard</router-link> </li> <li v-if='!auth'> <router-link to="/signup">Register</router-link> </li> <li v-if='!auth'> <router-link to="/signin">Log In</router-link> </li>

- Anda akan menemukan kode lengkap bagian Status UI [di sini](https://codepen.io/atanda1/pen/QWjNxyo).

Masuk Otomatis

Saat kami memuat ulang aplikasi kami, kami kehilangan data dan keluar, harus memulai dari awal. Ini karena token dan Id kami disimpan di Vuex, yang merupakan javascript, dan ini berarti aplikasi kami dimuat ulang dengan browser saat disegarkan.

Dan akhirnya, yang akan kita lakukan adalah mengambil token di dalam penyimpanan lokal kita. Dengan demikian, kita dapat memiliki token pengguna di browser terlepas dari kapan kita me-refresh jendela, dan memiliki metode login otomatis pengguna kita selama token masih valid.

Sebuah metode actions baru yang disebut AutoLogin dibuat, di mana kita akan mendapatkan token dan userId dari penyimpanan lokal, dan mengkomit data kita ke metode authUser dalam mutasi.

 actions : { AutoLogin ({commit}) { const token = localStorage.getItem('token') if (!token) { return } const userId = localStorage.getItem('userId') const token = localStorage.getItem('token') commit('authUser', { idToken: token, userId: userId }) } }

Kami kemudian pergi ke App.vue kami dan menulis metode yang created , yang akan mengirimkan autoLogin dari toko kami setiap kali aplikasi dimuat.

 created () { this.$store.dispatch('AutoLogin') }

Ambil_Pengguna_Data

Kami ingin menyambut pengguna di dasbor dengan menampilkan nama pengguna. Jadi, tindakan lain yang disebut fetchUser dibuat yang pertama kali memeriksa apakah ada token seperti biasa. Kemudian, ia melanjutkan untuk mendapatkan email dari penyimpanan lokal dan menanyakan database seperti yang dilakukan sebelumnya dengan validasi email.

Ini mengembalikan objek yang berisi data pengguna yang awalnya dikirimkan saat mendaftar. Kami kemudian mengonversi objek ini menjadi array dan memasukkannya ke mutasi storeUser yang awalnya dibuat.

Setelah itu kita membuat pengambil lain yang disebut user yang mengembalikan state.user yang sudah dilakukan melalui storeUser .

 getters: { user (state) { return state.user }, isAuthenticated (state) { return state.idToken !== null } }

Kembali ke dasbor, kita membuat metode komputasi baru bernama name yang mengembalikan state.user.name hanya jika pengguna ada.

Dan kami juga akan menambahkan properti terkomputasi yang created untuk mengirimkan tindakan fetchUser setelah halaman dimuat. Kami kemudian menggunakan v-if dalam HTML kami untuk menampilkan nama jika nama itu ada.

 <p v-if="name">Welcome, {{ name }} </p>

Kirim_Survei

Untuk mengirim survei, kami akan membuat tindakan postData yang mengirimkan data ke database menggunakan API database, dengan token untuk menunjukkan server bahwa pengguna login.

Kami kembali ke komponen dasbor dan mengirimkan data ke tindakan postData kami di toko.

 methods : { onSubmit () { const postData = { price: this.price, long: this.long, comment: this.comment } console.log(postData) this.$store.dispatch('postData', postData) } }

Itu dia, kami memiliki banyak fitur berguna yang diimplementasikan ke dalam aplikasi demo kami saat berkomunikasi dengan server Firebase kami. Mudah-mudahan, Anda akan menggunakan fitur canggih ini di proyek Anda berikutnya karena fitur tersebut sangat penting untuk membangun aplikasi web modern saat ini.

Jika Anda memiliki pertanyaan, Anda dapat meninggalkannya di bagian komentar dan saya akan dengan senang hati menjawabnya!

• Demo untuk tutorialnya ada di sini.

Sumber daya lain yang mungkin terbukti bermanfaat meliputi:

• Untuk memahami lebih lanjut tentang Firebase dan layanan lain yang ditawarkannya, lihat artikel Chris Esplin, “Apa itu Firebase?”
• Vuelidate adalah perpustakaan yang sangat bagus yang harus Anda gali. Anda harus membaca dokumentasinya untuk mendapatkan wawasan penuh.https://vuelidate.js.org/.
• Anda juga dapat menjelajahi aksio sendiri, terutama jika Anda ingin menggunakannya dalam proyek yang lebih besar.