
در قسمت قبل موفق شدیم که کاربر را ثبت نام و login کنیم و توکن امنیتی را با هر درخواست به سمت Firebase ارسال کنیم تا به اطلاعات پایگاه داده دسترسی داشته باشیم اما برنامه ما هنوز جای بهینه سازی دارد که در این جلسه به سراغ آن ها می رویم. به طور مثال کاربری که login نشده، چرا باید صفحه dashboard را ببیند؟ برای ارتقاء UI و UX بهتر است کاری کنیم که کاربران اصلا صفحه dashboard را نبینند. برای انجام این کار می توانیم از navigation guard ها (همان auth guard یا path guard) استفاده کنیم که در فصل routing در این دوره آموزشی مورد بحث ما بودند. با این حساب می توانیم به فایل router.js رفته و قبل از هر کاری Store را در آن import می کنیم:
import Vue from 'vue' import VueRouter from 'vue-router' import store from './store';
سپس همانطور که قبلا یاد گرفته ایم beforeEnter را به مسیر dashboard بدهیم:
Vue.use(VueRouter) 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'); } } } ]
ما قبلا یاد گرفته بودیم که beforeEnter یک تابع است و سه آرگومان to (کاربر به کجا می رود) from (کاربر از کجا می آید) و next (تابعی که اجازه رفتن به صفحه را می دهد) را دریافت می کنیم. من در اینجا با یک شرط ساده گفته ام که اگر idToken در state وجود داشت (کاربر login شده بود) next را اجرا کن که به کاربر اجازه بازدید از صفحه را می دهد و در غیر این صورت next را با آرگومان path اجرا می کنیم. زمانی که به next یک رشته path بدهید، باعث redirect شدن کاربر می شویم. در کد بالا اگر کاربر login نباشد (idToken در state وجود نداشته باشد) به صفحه signin منتقل می شود. شما می توانید این کدها را در مرورگر تست نمایید. در صورتی که login نباشید با کلیک روی دکمه dashboard از منوی navigation به صفحه sign in منتقل خواهید شد اما زمانی که login شوید به راحتی می توانید صفحه login را مشاهده کنید.
بنابراین کار ما به خوبی انجام شده است اما هنوز هم نشان دادن لینک کار خوبی نیست. از نظر UI و UX بهتر است لینک dashboard را کاملا حذف کنیم مگر آنکه کاربر login شده باشد (توکن امنیتی را داشته باشد). برای انجام این کار ابتدا به فایل store.js می رویم و یک Getter جدید می نویسیم:
getters: { user(state) { return state.user; }, isAuthenticated(state) { return state.idToken !== null; } }
getter جدید ما isAuthenticated (به معنی «احراز هویت شده است») می باشد که مثل همیشه State را دریافت کرده اما بر اساس یک شرط ساده، true یا false را برمی گرداند. در این شرط گفته ایم اگر idToken برابر با null نبود (اگر idToken وجود داشت و کاربر login بود) مقدار true را برگردان و در غیر این صورت مقدار false را برگردان. با این شرط ساده می فهمیم که کاربر login شده است یا خیر. حالا می توانیم به فایل header.vue رفته و با استفاده از این Getter ساده، لینک dashboard را نمایش بدهیم. برای این کار ابتدا قسمت Script را می نویسیم:
<script> export default { computed: { auth() { return this.$store.getters.isAuthenticated; } } }; </script>
همانطور که مشاهده می کنید یک خصوصیت Computed به نام دلخواه auth را ایجاد کرده ام که به isAuthenticated متصل است و login بودن کاربر را چک می کند. حالا با استفاده از همین خصوصیت و شرط موجود در isAuthenticated می توانیم لینک dashboard را به صورت مشروط نمایش بدهیم. البته هدف من این است که تمام لینک ها را بر اساس isAuthenticated نمایش بدهیم؛ به طور مثال لینک های sign in و sign up زمانی که کاربر login شده است هیچ معنی ندارند و نباید نمایش داده شوند. بنابراین کل قسمت Template در این فایل را به شکل زیر در می آورم:
<nav> <ul> <li v-if="!auth"> <router-link to="/signup">Sign Up</router-link> </li> <li v-if="!auth"> <router-link to="/signin">Sign In</router-link> </li> <li v-if="auth"> <router-link to="/dashboard">Dashboard</router-link> </li> </ul> </nav>
حالا برای تست کردن این کدها به مرورگر می رویم و صفحه را refresh می کنیم. لینک dashboard در ابتدا نباید وجود داشته باشد و اگر از صفحه login وارد حساب کاربری خود شدیم، باید لینک های sign in و sign up از بین بروند و فقط Dashboard باقی بماند. در حال حاضر برنامه ما از نظر UI ارتقاء پیدا کرده است اما هنوز مشکلات کوچکی وجود دارد که باید حل شوند. اگر بخواهیم به چند نمونه از این مشکل ها اشاره کنیم می گوییم:
- در حال حاضر هیچ راهی برای logout شدن نداریم به جز اینکه صفحه را refresh کنیم که اصلا از نظر UI و UX جالب نیست. ما باید دکمه جداگانه ای را برای عملیات logout داشته باشیم تا کاربران بتوانند با آن از حساب خود خارج شوند.
- در حال حاضر داده ها persist نمی شوند. یعنی اگر کاربری login شود و صفحه را refresh کند، توکن امنیتی از بین رفته و دیگر login نخواهد بود چرا که از vuex برای ذخیره داده ها استفاده می کنیم و vuex یک پکیج مدیریت state است و state برنامه های وب با refresh شدن از بین می رود مگر آنکه داده ها در جایی مانند localstorage مرورگر persist شود.
در قسمت های بعدی به حل این موضوعات می پردازیم.
- نصب و راهاندازی فریمورک 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