Ayrıca sunucuya bir HTTP isteği gönderebilmek için [`axios`](https://github.com/axios/axios) dosyasını içe aktarın:

 import axios from 'axios'

Devam etmeden önce, aşağıda görüldüğü gibi, e-postayı gerektiği gibi doğrulayabilmek için veritabanına bazı kurallar eklememiz gerekecek:

 "read" = "true"

Bu, veritabanının istemci tarafından herhangi bir engel olmaksızın okunabileceği anlamına gelir.

 "write" = "auth" !== null

Kimliği doğrulanmış bir kullanıcı olmanız dışında veritabanına yazamazsınız.

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

Bu, "kullanıcılar" belgesini bir "e-posta" dizini ile sorgulamamızı sağlar. Yani, benzersiz bir e-posta için veritabanını tam anlamıyla filtreleyebilirsiniz. Ardından, tıpkı yöntemlerimiz, hesaplanmış, vb. gibi "doğrulamalar" adında özel bir hesaplanmış özellik ekleyin. "Doğrulamalar" altında, gerekli verileri doğrulamak için gerekli olan ve açıkça bir e-posta olması gereken "e-posta"dan başlayarak yöntemlerimiz olacak. . Ayrıca, bir başkası tarafından daha önce bir e-posta alındığında bir kullanıcıya, kullanıcı e-postayı yazdıktan sonra, tümü özel bir doğrulayıcı içinde zaman uyumsuz doğrulayıcılar adı verilen bir şey kullanarak veritabanını kontrol ederek söyleyebilmek istiyoruz ve tümü [vuelidate. ](https://vuelidate.js.org/#sub-asynchronous-validation) Daha sonra benzersiz altında, veritabanını axios kullanarak sorgulayın ve yalnızca uzunluğu 0 ise yanıtı döndürmek için varsayılan Object.keys'i kullanın. Yaş için, gerekli, sayısal ve minVal'e atanan minimum 18 değerini ekleyeceksiniz. ` özellikleri olarak.

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

Parolanın özellikleri gereklidir ve minimum uzunluk "minLen"e atanmıştır.

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

`confirmPassword` özellikleri temel olarak şifre ile aynı olmalıdır.

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

Kullanıcıya e-postanın alındığını söylemek için, "benzersiz" ifadesinin doğru veya yanlış olup olmadığını kontrol etmek için "v-if" kullanın. Doğruysa, döndürülen Nesnenin uzunluğunun 0 olduğu anlamına gelir ve e-posta hala kullanılabilir ve bunun tersi de geçerlidir. Aynı şekilde, `v-if` kullanarak kullanıcı girişinin gerçek bir e-posta olup olmadığını kontrol edebilirsiniz. Ve bireysel girişteki tüm çevreleyen div'ler için, o girişte bir hata olduğunda aktif hale gelen bir geçersiz sınıfı ekleyeceğiz. Doğrulama olaylarını HTML'deki girişlerin her birine bağlamak için, "e-posta"da görüldüğü gibi [`$touch()`](https://vuelidate.js.org/#sub-without-v-model) kullanırız. `aşağıda. "Age", "password" ve "confirmPassword", HTML girişlerine "e-posta" ile benzer şekilde bağlanacaktır. Girişlerden herhangi birinde bir hata varsa, 'Gönder' düğmesini devre dışı bırakacağız.

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

İşte bu vuelidate bölümü için eksiksiz bir [CodePen örneği](https://codepen.io/atanda1/pen/Yzyqrjv).

## Kimlik Doğrulama Bu uygulama bir SPA'dır ve geleneksel siteler gibi yeniden yüklenmez, bu nedenle uygulamamızdaki her bileşenin genel kimlik doğrulama durumunun farkında olmasını sağlamak için tek "doğruluk kaynağımız" olarak Vuex'i kullanacağız. Mağaza dosyamıza gidiyoruz ve eylemler içinde hem oturum açma/kaydolma yöntemini oluşturuyoruz. Kullanıcı verilerini gönderdiğimizde alınan yanıt ('token' ve 'userId') durumumuz içinde saklanacaktır. Bu önemlidir çünkü jeton, uygulamamızın herhangi bir noktasında hala giriş yapıp yapmadığımızı bilmek için kullanılacaktır. "token", "userId" ve kullanıcı, boş bir başlangıç ​​değeriyle durumda oluşturulur. Kullanıcıya çok sonra geleceğiz, ancak şimdilik ilk ikisine odaklanacağız.

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

Daha sonra gerektiğinde durumu değiştirmek için mutasyonlar oluşturulur.

authUser	Belirteci ve userId kaydeder
storeUser	Kullanıcı bilgilerini saklar
clearAuthData	Verileri ilk durumuna geri siler

 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 } }

Kaydolma/oturum açma için, auth isteklerimizi sunucuya gönderdiğimiz her ikisi için de bireysel eylemler oluşturmamız gerekecek. Bundan sonra, kaydolma/oturum açma sırasındaki yanıtımız (belirteç ve kullanıcı kimliği) authUser'a taahhüt edilir ve yerel depolamaya kaydedilir. Ancak burada işin zor yanı, kayıt işlemiyle özellikle yapacağımız şey, yalnızca kimlik doğrulama veritabanına kaydedilecek e-posta ve parolayı göndermektir. Gerçek anlamda, bu kimlik doğrulama veritabanındaki verileri kullanma erişimimiz yok ve e-posta/şifre dışında herhangi bir kayıt verimizi göndermedik. Yani yapacağımız şey, kayıt verilerinin tamamını başka bir veritabanına göndermek için başka bir eylem oluşturmak. Bu ayrı veritabanı belgesinde, oraya kaydetmeyi seçtiğimiz tüm bilgilere tam erişimimiz olacak. Bu yeni eyleme 'storeUser' adını vereceğiz. Daha sonra kayıt eylemimize gidiyoruz ve kayıt verilerimizi içeren tüm nesneyi artık 'storeUser' aracılığıyla erişimimiz olan bir veritabanına gönderiyoruz. **Not:** Güvenlik nedeniyle kullanıcınızın şifresini `storeUser` ile veritabanına göndermek istemeyebilirsiniz. `storeUser`, veritabanına gönderirken yeni alınan jetonumuzu ve veritabanı API'mizi kullanarak bir sorgu ekler. Bunun nedeni, kanıtımızla (belirteç) kimliğimiz doğrulanmadıkça veritabanımıza yazamıyor olmamızdır. Firebase'e başlangıçta verdiğimiz kural buydu, hatırladın mı?

 “write” = “auth” !== null

Kaydolma/oturum açma işlemleri için tam kod [burada](https://codepen.io/atanda1/pen/mdePKqj). Ardından, "onSubmit" yöntemi içindeki bileşenlerinden hem kaydolma hem de oturum açma işlemlerini mağazadaki ilgili eylemlere gönderin.

 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) } } }

**Not:** `signupData` formun verilerini içerir. ## AuthGuard Oturum açmamış kullanıcıların anketi gönderecekleri kontrol paneline erişmelerini önlemek için AuthGuard'a ihtiyaç vardır. Rota dosyasına gidin ve mağazamızı içe aktarın.

 import store from './store'

Rota içinde, kontrol panelinin yoluna gidin ve aşağıdakileri ekleyin:

 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') } } } ]

Tüm bunlar, durumda bir belirteç olup olmadığını kontrol etmektir, evet ise, gösterge panosuna erişim sağlarız ve bunun tersi de geçerlidir. ## Oturumu Kapat Oturum kapatma seçeneğimizi oluşturmak için, daha önce "mutasyonlar" altında oluşturduğumuz "clearAuth"u kullanacağız ve bu, hem "token"ı hem de "userId"yi "boş"a ayarlayacaktır. Şimdi, 'clearAuth', yerel depolamayı silme ve kullanıcıyı tamamen yeniden yönlendirmek için 'router.replace('/')' eklemeyi taahhüt eden yeni bir 'logout' 'action' oluşturuyoruz.

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

Başlık bileşeninde, mağazadaki çıkış eylemimizi gönderen bir "onLogout" yöntemimiz var.

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

Ardından, [burada](https://codepen.io/atanda1/pen/jObqKNd) görebildiğimiz gibi 'onLogout' yöntemini başlatan düğmeye bir '@click' ekleriz.

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

## UI_State Gösterge tablosuna koşullu erişim verdiğimize göre, sonraki adım onu ​​gezinme çubuğundan kaldırmaktır, böylece yalnızca kimliği doğrulanmış kullanıcılar görebilir. Bunu yapmak için, durumumuzdaki belirtecin boş olup olmadığını kontrol eden 'ifAuthenticated' adlı 'alıcılar'ın altına yeni bir yöntem eklerdik. Bir belirteç olduğunda, kullanıcının kimliğinin doğrulandığını ve gezinme çubuğunda anket panosu seçeneğini görmelerini istediğimizi gösterir.

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

Bundan sonra, başlık bileşenine geri dönersiniz ve hesaplanan altında bir 'auth' yöntemi yaratırsınız, bu da mağazada yeni oluşturduğumuz 'alıcılar' içindeki 'isAuthenticated'ımıza gönderilir. Bunun yaptığı şey, belirteç yoksa "isAuthenticated"ın false döndürmesidir; bu, "auth" öğesinin de boş olacağı anlamına gelir ve bunun tersi de geçerlidir.

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

Bundan sonra, 'auth' öğesinin boş olup olmadığını kontrol etmek için HTML'mize bir 'v-if' ekleriz ve bu seçeneğin gezinme çubuğunda gösterilip gösterilmeyeceğini belirleriz.

 <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>

- Kullanıcı Arayüzü Durumu bölümünün tam kodunu [burada](https://codepen.io/atanda1/pen/QWjNxyo) bulabilirsiniz.

Otomatik giriş

Uygulamamızı yeniden yüklediğimizde verileri kaybederiz ve her şeye yeniden başlamak zorunda kaldığımız için çıkış yaparız. Bunun nedeni, simgemizin ve kimliğimizin javascript olan Vuex'te saklanması ve bu, uygulamamızın yenilendiğinde tarayıcıyla yeniden yükleneceği anlamına gelir.

Ve son olarak, yapacağımız şey, yerel depomuzdaki belirteci almaktır. Bunu yaparak, pencereyi ne zaman yenilediğimizden bağımsız olarak tarayıcıda kullanıcının jetonunu alabiliriz ve jeton hala geçerli olduğu sürece kullanıcımızda otomatik olarak oturum açma yöntemine sahip olabiliriz.

Yerel depolamadan belirteci ve userId alacağımız ve verilerimizi mutasyonlarda authUser yöntemine işleyeceğimiz AutoLogin adlı yeni bir actions yöntemi oluşturulur.

 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 }) } }

Daha sonra App.vue'ya gidiyoruz ve uygulama her yüklendiğinde mağazamızdan autoLogin gönderecek created bir yöntem yazıyoruz.

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

Fetch_User_Data

Kullanıcının adını görüntüleyerek kullanıcıyı gösterge tablosunda karşılamak istiyoruz. Ve böylece, her zamanki gibi bir belirteç olup olmadığını ilk önce kontrol eden fetchUser adlı başka bir eylem oluşturulur. Ardından, e-postayı yerel depolamadan almaya devam eder ve e-posta doğrulamasıyla daha önce yapıldığı gibi veritabanını sorgular.

Bu, kayıt sırasında başlangıçta gönderilen kullanıcının verilerini içeren bir nesne döndürür. Daha sonra bu nesneyi bir diziye dönüştürüyoruz ve başlangıçta oluşturulan storeUser mutasyonuna bağlıyoruz.

Bundan sonra, storeUser aracılığıyla zaten taahhüt edilen state.user döndüren user adında başka bir alıcı storeUser .

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

Panoya geri dönersek, yalnızca kullanıcı varsa state.user.name döndüren name adında yeni bir hesaplanmış yöntem oluşturuyoruz.

Ayrıca, sayfa yüklendikten sonra fetchUser eylemini göndermek için created hesaplanmış özelliği ekleyeceğiz. Daha sonra, ad varsa, adı görüntülemek için HTML'mizde v-if if'i kullanırız.

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

Send_Survey

Anketi göndermek için, sunucuya kullanıcının oturum açtığını göstermek için belirteçle birlikte, veritabanı API'sini kullanarak verileri veritabanına gönderen bir postData eylemi oluşturacağız.

Pano bileşenine geri dönüyoruz ve verileri mağazadaki postData eylemimize gönderiyoruz.

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

İşte elimizde, Firebase sunucumuzla iletişim kurarken demo uygulamamıza uygulanan birçok faydalı özelliğimiz var. Bugün modern web uygulamaları oluşturmak için çok önemli olduklarından, bir sonraki projenizde bu güçlü özellikleri kullanacağınızı umuyoruz.

Herhangi bir sorunuz varsa, bunları yorum bölümünde bırakabilirsiniz, her birine cevap vermekten mutluluk duyacağım!

• Eğitimin demosu burada yayında.

Yararlı olabilecek diğer kaynaklar şunları içerir:

• Firebase ve sunduğu diğer hizmetler hakkında daha fazla bilgi edinmek için Chris Esplin'in “Firebase Nedir?” başlıklı makalesine göz atın.
• Vuelidate, gerçekten incelemeniz gereken gerçekten güzel bir kütüphanedir. Tam bilgi edinmek için belgelerini okumalısınız.https://vuelidate.js.org/.
• Özellikle daha büyük projelerde kullanmak istiyorsanız, axios'u kendi başına da keşfedebilirsiniz.