
در قسمت قبل توانستیم با موفقیت توکن امینیتی را از firebase دریافت کرده و سپس آن را با vuex ذخیره کنیم اما هنوز هیچ کار دیگری با آن نمی کنیم. باید از خودمان بپرسیم که این توکن اصلا برای چه کاری است؟ درست است! این توکن باید به درخواست هایی متصل شود که به سمت منابع محافظت شده می روند. منظور از منابع محافظت شده، هر چیزی در اینترنت است که برای دسترسی به آن نیاز به مجوز داشته باشیم، حالا این مجوز چه به صورت توکن امنیتی باشد، چه به صورت رمز عبور و ایمیل و چه به هر صورت دیگری باشد. در حال حاضر برنامه ما در صفحه dashboard اطلاعات کاربران را از پایگاه داده firebase می گیرد که از منابع محافظت شده هستند (Firebase از ما توکن می خواهد و گرنه قادر به خواندن اطلاعات (read) نخواهیم بود). درخواست GET ما برای دریافت داده های کاربران در فایل dashboard.vue به شکل زیر است:
created() { axios .get("/users.json") .then(res => { console.log(res); const users = []; const data = res.data; for (let key in data) { const user = data[key]; user.id = key; users.push(user); } console.log(users); this.email = users[0].email; }) .catch(error => console.log(error)); }
اما هیچ توکنی به این درخواست متصل نشده است. در قدم اول دوست دارم که این درخواست Axios را به یک action در فایل Store.js منتقل کنیم بنابراین باید آن را کات کرده و به فایل store.js برویم:
// بقیه کدها // login({ commit }, authData) { axios .post( "/accounts:signInWithPassword?key=AIzaSyDtirb936QLEAL9Hbkn1st5c3cF3U7_cFI", { email: authData.email, password: authData.password, returnSecureToken: true } ) .then(res => { console.log(res); commit('authUser', { token: res.data.idToken, userId: res.data.localId }); }) .catch(error => console.log(error)); }, fetchUser({ commit }) { axios .get("/users.json") .then(res => { console.log(res); const users = []; const data = res.data; for (let key in data) { const user = data[key]; user.id = key; users.push(user); } console.log(users); this.email = users[0].email; }) .catch(error => console.log(error)); } // بقیه کدها //
نام action جدید من fetchUser است اما شما می توانید هر نام دیگری را انتخاب نمایید. البته قبل از ادامه کار باید دو نکته مهم را برایتان توضیح بدهم. زمانی که ما فرم ثبت نام را پُر می کنیم، هیچ اطلاعاتی را در پایگاه داده خودمان در firebase ذخیره نمی کنیم بلکه ثبت نام کاربران، باعث ذخیره شدن داده های آن ها در یک پایگاه داده دیگر در Firebase می شود. اگر یادتان باشد در قسمت های قبلی دو قسمت جدا به نام database و authentication داشتیم. پایگاه داده شخصی ما در Firebase با پایگاه داده احراز هویتِ firebase متفاوت هستند چرا که ما به پایگاه داده authentication دسترسی نداریم و نمی توانیم آن را ویرایش کنیم. با این حساب باید در action مربوط به signup یک action دیگر را صدا بزنیم که داده های کاربر را در پایگاه داده خودمان نیز ذخیره کند. این کار ما را به نکته دوم می رساند: baseURL برای ثبت نام کاربران در پایگاه داده authentication و برای ثبت داده های کاربران یا دریافت داده هایشان (read یا write) از پایگاه داده شخصی خودمان، کاملا متفاوت است.
با توجه به این دو نکته، ابتدا به فایل store.js بروید و instance سراسری و اصلی axios را نیز در آن وارد کنید:
import Vue from 'vue' import Vuex from 'vuex' import axios from "./axios-auth"; import globalAxios from "axios";
globalAxios (این نام سلیقه ای است) همان instance ای است که من با آن داده ها را دریافت کرده یا در پایگاه داده خودمان ثبت می کنم. حالا یک action جدید به نام storeUser ایجاد می کنم:
// بقیه کدها // storeUser({ commit }, userData) { globalAxios.post('/users.json', userData) .then(res => console.log(res)) .catch(error => console.log(error)) }, fetchUser({ commit }) { globalAxios .get("/users.json") // بقیه کدها //
همانطور که مشخص است کار این action، ثبت userData (داده های کاربر) در پایگاه داده خودمان است. حالا باید این action را در action دیگری به نام signup صدا بزنیم تا زمانی که کاربر در پایگاه داده authentication ذخیره شد، داده هایش را در پایگاه داده خودمان نیز ذخیره کنیم. در ضمن توجه کنید که fetchUser را نیز تغییر داده ام تا به جای axios از globalAxios استفاده کند (با این کار baseURL صحیح برای دریافت داده ها خواهیم داشت). خوشبختانه شیء context ای که به action ها داده می شود و ما از آن commit را استخراج می کنیم، متد dispatch را نیز به ما می دهد بنابراین می توان گفت:
signup({ commit, dispatch }, authData) { axios .post("/accounts:signUp?key=AIzaSyDtirb936QLEAL9Hbkn1st5c3cF3U7_cFI", { email: authData.email, password: authData.password, returnSecureToken: true }) .then(res => { console.log(res); commit('authUser', { token: res.data.idToken, userId: res.data.localId }); dispatch('storeUser', authData) }) .catch(error => console.log(error)); },
در این کد و در قدم اول dispatch را نیز علاوه بر commit از شیء context استخراج کرده ام تا بتوانم آن را صدا بزنم. سپس پس از commit کردن authUser، اکشن storeUser را dispatch کرده ام و authData را به آن پاس داده ام. مشکل اینجاست که authData فقط ایمیل و پسورد کاربر را داشت بنابراین به signup.vue می رویم و به جای پاس دادن شیء ساده، کل formData را پاس می دهیم:
onSubmit() { const formData = { email: this.email, age: this.age, password: this.password, confirmPassword: this.confirmPassword, country: this.country, hobbies: this.hobbyInputs.map(hobby => hobby.value), terms: this.terms }; console.log(formData); this.$store.dispatch("signup", formData); }
با این کار باید کدهای ما کار کنند. برای تست آن ها ابتدا به firebase بروید و از سربرگ rules، دستور write را نیز به شکل دستور read در بیاورید تا دسترسی نوشتن اطلاعات نیز فقط برای افراد login شده میسر باشد:
{ "rules": { ".read": "auth != null", ".write": "auth != null" } }
پس از تغییر این کدها یادتان نرود که دکمه publish را بزنید. حالا اگر به صفحه Signup رفته و با یک ایمیل جدید یک حساب کاربری جدید ایجاد کنید، خطا دریافت خواهید کرد. چرا؟ در قسمت بعد این موضوع را بررسی خواهیم کرد.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI