قم أيضًا باستيراد [`axios`] (https://github.com/axios/axios) لتتمكن من إرسال طلب HTTP إلى الخادم:

 import axios from 'axios'

قبل المضي قدمًا ، سنحتاج إلى إضافة بعض القواعد إلى قاعدة البيانات حتى نتمكن من التحقق من صحة البريد الإلكتروني كما ينبغي ، تمامًا كما هو موضح أدناه:

 "read" = "true"

بمعنى أنه يمكن قراءة قاعدة البيانات دون أي عائق من جانب العميل.

 "write" = "auth" !== null

لا يمكنك الكتابة في قاعدة البيانات إلا أنك مستخدم مصدق عليه.

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

يتيح لنا ذلك الاستعلام عن مستند "المستخدمين" بفهرس "البريد الإلكتروني". بمعنى ، يمكنك تصفية قاعدة البيانات حرفيًا للحصول على بريد إلكتروني فريد. ثم أضف خاصية محسوبة مخصصة باسم "عمليات التحقق" تمامًا مثلما لدينا طرق ، محسوبة ، وما إلى ذلك. ضمن "عمليات التحقق" ، سيكون لدينا طرق للتحقق من صحة البيانات الضرورية بدءًا من "البريد الإلكتروني" حيث يكون مطلوبًا ومن الواضح أنه يجب أن يكون بريدًا إلكترونيًا . أيضًا ، نريد أن نكون قادرين على إخبار المستخدم عندما أخذ شخص آخر بريدًا إلكترونيًا بالفعل ، عن طريق التحقق من قاعدة البيانات بعد أن كتبه المستخدم باستخدام شيء يسمى المصادقات غير المتزامنة ، كل ذلك ضمن مدقق مخصص وكل ذلك مدعوم من قبل [vuelidate. ] (https://vuelidate.js.org/#sub-asynchronous-validation) بعد ذلك ، ضمن فريد ، استعلم عن قاعدة البيانات باستخدام محاور واستخدم مفاتيح Object.key الافتراضية لإرجاع الاستجابة فقط إذا كان طولها 0. بالنسبة للعمر ، ستضيف قيمة مطلوبة ورقمية ودقيقة قدرها 18 تم تعيينها لـ `minVal خصائصه.

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

خصائص كلمة المرور مطلوبة ، بحد أدنى 6 مخصص لـ "minLen".

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

يجب أن تكون خصائص "ConfirmPassword" هي نفسها كلمة المرور.

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

لإخبار المستخدم بأن البريد الإلكتروني مأخوذ ، استخدم "v-if" للتحقق مما إذا كان "الفريد" صحيحًا أم خطأ. إذا كان هذا صحيحًا ، فهذا يعني أن طول الكائن الذي تم إرجاعه هو 0 ، ولا يزال من الممكن استخدام البريد الإلكتروني والعكس صحيح. بنفس الطريقة ، يمكنك التحقق مما إذا كان إدخال المستخدم هو بريد إلكتروني فعلي باستخدام "v-if". وبالنسبة إلى جميع divs المحيطة على المدخلات الفردية ، سنضيف فئة غير صالحة تصبح نشطة بمجرد حدوث خطأ في هذا الإدخال. لربط أحداث التحقق من الصحة بكل إدخال في HTML ، نستخدم [`$ touch ()`] (https://vuelidate.js.org/#sub-without-v-model) كما يظهر مع `البريد الإلكتروني أدناه. سيتم ربط "Age" و "password" و "ConfirmPassword" بإدخال HTML بطريقة مشابهة لـ "البريد الإلكتروني". وسوف نجعل زر "إرسال" غير نشط إذا كان هناك خطأ في أي من المدخلات.

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

إليك [مثال على CodePen] كامل (https://codepen.io/atanda1/pen/Yzyqrjv) لقسم vuelidate هذا.

## المصادقة هذا التطبيق عبارة عن SPA ولا يتم إعادة تحميله مثل المواقع التقليدية ، لذلك سنستخدم Vuex ، باعتباره "مصدر الحقيقة" الوحيد لدينا للسماح لكل مكون في تطبيقنا بالتعرف على حالة المصادقة العامة. ننتقل إلى ملف المتجر الخاص بنا ، وننشئ كل من طريقة تسجيل الدخول / التسجيل ضمن الإجراءات. الاستجابة ("الرمز المميز" و "معرف المستخدم") التي تم تلقيها عندما نرسل بيانات المستخدمين ، سيتم تخزينها في حالتنا. هذا مهم لأنه سيتم استخدام الرمز المميز لمعرفة ما إذا كنا لا نزال مسجلين الدخول أم لا في أي وقت داخل تطبيقنا. يتم إنشاء "الرمز" و "معرف المستخدم" والمستخدم في الحالة بقيمة أولية خالية. سنصل إلى المستخدم لاحقًا ، لكن في الوقت الحالي ، سنركز على الأولين.

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

ثم يتم إنشاء الطفرات لتغيير الحالة عند الحاجة.

authUser	يحفظ الرمز المميز userId
storeUser	يخزن معلومات المستخدم
clearAuthData	يمحو البيانات مرة أخرى إلى الحالة الأولية

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

للتسجيل / تسجيل الدخول ، سيتعين علينا إنشاء إجراءات فردية لكليهما ، حيث نرسل طلبات المصادقة الخاصة بنا إلى الخادم. بعد ذلك ، يتم الالتزام باستجابتنا (الرمز المميز ومعرف المستخدم) من التسجيل / تسجيل الدخول إلى authUser ، ويتم حفظها في التخزين المحلي. ولكن إليك الجزء الصعب ، ما سنفعله بإجراء التسجيل بشكل خاص هو إرسال البريد الإلكتروني وكلمة المرور فقط للتسجيل في قاعدة بيانات المصادقة. بالمعنى الحقيقي ، ليس لدينا وصول لاستخدام البيانات الموجودة في قاعدة بيانات المصادقة هذه ، ولم نرسل أيًا من بيانات التسجيل الخاصة بنا إلى جانب البريد الإلكتروني / كلمة المرور. لذا ما سنفعله هو إنشاء إجراء آخر لإرسال بيانات التسجيل الكاملة إلى قاعدة بيانات أخرى. في مستند قاعدة البيانات المنفصل هذا ، سيكون لدينا وصول كامل إلى جميع المعلومات التي نختار حفظها هناك. سنطلق على هذا الإجراء الجديد اسم "storeUser" ثم ننتقل إلى إجراء التسجيل الخاص بنا ونرسل الكائن بالكامل الذي يحتوي على بيانات التسجيل الخاصة بنا إلى قاعدة بيانات لدينا الآن إمكانية الوصول إليها من خلال "storeUser". ** ملاحظة: ** قد لا ترغب في إرسال كلمة مرور المستخدم الخاصة بك مع "storeUser" إلى قاعدة البيانات لأسباب أمنية. يضيف "storeUser" استعلامًا باستخدام الرمز المميز الذي حصلنا عليه مؤخرًا وواجهة برمجة التطبيقات لقاعدة البيانات أثناء النشر إلى قاعدة البيانات. هذا لأننا لا نستطيع الكتابة إلى قاعدة البيانات الخاصة بنا ، باستثناء أننا مصدقون على إثباتنا (الرمز المميز). هذه هي القاعدة التي قدمناها لـ Firebase في البداية ، هل تتذكر؟

 “write” = “auth” !== null

الشفرة الكاملة لإجراءات التسجيل / تسجيل الدخول موجودة [هنا] (https://codepen.io/atanda1/pen/mdePKqj). ثم أرسل كلا من التسجيل وتسجيل الدخول من مكوناتهما ضمن طريقة "onSubmit" إلى الإجراءات ذات الصلة في المتجر.

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

** ملاحظة: ** تحتوي "بيانات التسجيل" على بيانات النموذج. ## AuthGuard هناك حاجة لـ AuthGuard لمنع المستخدمين الذين لم يسجلوا الدخول من الوصول إلى لوحة التحكم حيث سيرسلون الاستطلاع. انتقل إلى ملف الطريق واستورد متجرنا.

 import store from './store'

داخل المسار ، انتقل إلى مسار لوحة المعلومات وأضف ما يلي:

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

كل ما يفعله هذا هو التحقق مما إذا كان هناك رمز مميز في الحالة ، وإذا كانت الإجابة بنعم ، فإننا نمنح الوصول إلى لوحة القيادة والعكس صحيح. ## تسجيل الخروج لإنشاء خيار تسجيل الخروج الخاص بنا ، سنستخدم "clearAuth" الذي أنشأناه سابقًا ضمن "الطفرات" والذي يعيّن فقط "الرمز المميز" و "معرف المستخدم" على "فارغ". نقوم الآن بإنشاء "إجراء" "تسجيل خروج" جديد ، والذي يلتزم بـ "clearAuth" ، وحذف التخزين المحلي وإضافة "router.replace ('/')` لإعادة توجيه المستخدم بالكامل.

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

في مكون الرأس ، لدينا طريقة "onLogout" التي ترسل إجراء تسجيل الخروج الخاص بنا في المتجر.

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

ثم نضيف "@ click" إلى الزر الذي يطلق طريقة "onLogout" كما نرى [هنا] (https://codepen.io/atanda1/pen/jObqKNd).

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

## UI_State الآن بعد أن قدمنا ​​وصولاً مشروطًا إلى لوحة القيادة ، فإن الخطوة التالية هي إزالتها من شريط التنقل ، بحيث لا يتمكن سوى المستخدمين المصادق عليهم من عرضها. للقيام بذلك ، سنضيف طريقة جديدة ضمن "getters" تسمى "ifAuthenticated" والتي تتحقق مما إذا كان الرمز المميز داخل حالتنا فارغًا. عندما يكون هناك رمز مميز ، فإنه يُظهر أن المستخدم قد تمت مصادقته ونريده أن يرى خيار لوحة معلومات الاستطلاع على شريط التنقل.

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

بعد ذلك ، يمكنك الرجوع إلى مكون الرأس وإنشاء طريقة "auth" تحت المحسوبة ، والتي ترسل إلى "isAuthenticated" داخل "getters" التي أنشأناها للتو في المتجر. ما يفعله هذا هو أن "المصادقة" ستعيد خطأ إذا لم يكن هناك رمز ، مما يعني أن "المصادقة" ستكون أيضًا خالية والعكس صحيح.

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

بعد ذلك ، نضيف "v-if" إلى HTML الخاص بنا للتحقق مما إذا كانت "auth" فارغة أم لا ، وتحديد ما إذا كان هذا الخيار سيظهر على شريط التنقل.

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

- ستجد الكود الكامل لقسم حالة واجهة المستخدم [هنا] (https://codepen.io/atanda1/pen/QWjNxyo).

تسجيل تلقائى

عندما نعيد تحميل تطبيقنا ، نفقد البيانات ونقوم بتسجيل الخروج ، واضطررنا إلى البدء من جديد. هذا بسبب تخزين الرمز المميز والمعرف الخاص بنا في Vuex ، وهو جافا سكريبت ، وهذا يعني أنه يتم إعادة تحميل تطبيقنا باستخدام المتصفح عند التحديث.

وأخيرًا ، ما سنفعله هو استرداد الرمز المميز داخل التخزين المحلي لدينا. من خلال القيام بذلك ، يمكننا الحصول على رمز المستخدم على المتصفح بغض النظر عن وقت تحديث النافذة ، ولدينا طريقة لتسجيل الدخول التلقائي لمستخدمنا بقدر ما لا يزال الرمز المميز صالحًا.

تم إنشاء طريقة actions جديدة تسمى AutoLogin ، حيث سنحصل على الرمز المميز userId من التخزين المحلي ، ونلتزم authUser بطريقة authUser في الطفرات.

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

ننتقل بعد ذلك إلى App.vue الخاص بنا ونكتب طريقة created ، والتي سترسل autoLogin من متجرنا في كل مرة يتم فيها تحميل التطبيق.

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

Fetch_User_Data

نريد الترحيب بالمستخدم على لوحة التحكم من خلال عرض اسم المستخدم. وهكذا ، يتم إنشاء إجراء آخر يسمى fetchUser والذي يتحقق أولاً من وجود رمز مميز كالمعتاد. بعد ذلك ، يستمر في الحصول على البريد الإلكتروني من التخزين المحلي والاستعلام عن قاعدة البيانات كما تم سابقًا مع التحقق من صحة البريد الإلكتروني.

يؤدي هذا إلى إرجاع كائن يحتوي على بيانات المستخدم المرسلة في البداية أثناء التسجيل. نقوم بعد ذلك بتحويل هذا الكائن إلى مصفوفة storeUser الذي تم إنشاؤه في البداية بواسطة طفرة المستخدم.

بعد ذلك نقوم بإنشاء برنامج getter آخر يسمى user والذي يعيد state.user الذي تم الالتزام به بالفعل من خلال storeUser .

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

بالعودة إلى لوحة القيادة ، نقوم بإنشاء طريقة محسوبة جديدة تسمى name تُرجع state.user.name فقط في حالة وجود المستخدم.

وسنضيف أيضًا الخاصية المحسوبة created لإرسال إجراء fetchUser بمجرد تحميل الصفحة. ثم نستخدم v-if في HTML الخاص بنا لعرض الاسم إذا كان الاسم موجودًا.

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

Send_Survey

لإرسال الاستطلاع ، سننشئ إجراء postData الذي يرسل البيانات إلى قاعدة البيانات باستخدام واجهة برمجة تطبيقات قاعدة البيانات ، مع الرمز المميز لإظهار الخادم الذي قام المستخدم بتسجيل الدخول.

نعود إلى مكون لوحة القيادة ونرسل البيانات إلى إجراء postData بنا في المتجر.

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

يوجد لدينا ، لدينا الكثير من الميزات المفيدة التي تم تنفيذها في تطبيقنا التجريبي أثناء الاتصال بخادم Firebase. نأمل أن تستخدم هذه الميزات القوية في مشروعك التالي لأنها بالغة الأهمية لبناء تطبيقات الويب الحديثة اليوم.

إذا كانت لديك أي أسئلة ، فيمكنك تركها في قسم التعليقات وسيسعدني الإجابة على كل سؤال منها!

• العرض التوضيحي للدرس التعليمي موجود هنا.

تشمل الموارد الأخرى التي قد تكون مفيدة ما يلي:

• لفهم المزيد حول Firebase والخدمات الأخرى التي يقدمها ، راجع مقالة Chris Esplin ، "ما هو Firebase؟"
• Vuelidate هي مكتبة رائعة حقًا يجب عليك البحث فيها حقًا. يجب عليك قراءة وثائقه للحصول على رؤية كاملة. https: //vuelidate.js.org/.
• يمكنك أيضًا استكشاف المحاور من تلقاء نفسها ، خاصة إذا كنت ترغب في استخدامها في مشاريع أكبر.