
در جلسه قبل به شما توضیح دادم که gaurd ها برای محافظت از ورود به یا خروج از URL ها و صفحات می باشند. همچنین برایتان توضیح دادم که انواع gaurd ها به چهار بخش تقسیم می شود که سه بخش اول آن مربوط به ورود به URL ها و بخش آخر مربوط به خروج از آن ها است:
- محافظت قبل از اینکه کاربر وارد URL خاصی شود (آیا او اجازه دارد این مسیر را باز کند؟). این مرحله را می توانیم به سه شکل مختلف اجرا کنیم.
- محافظت پس از اینکه کاربر وارد URL خاصی شده است (آیا او اجازه ترک این مسیر را دارد؟). این مرحله به یک شکل انجام می شود.
در همان جلسه دو بخش اول را بررسی کردیم که به ترتیب مربوط به متدهای beforeEach (اجرا روی تک تک صفحات – تعریف شده در فایل main.js) و beforeEnter (اجرا روی مسیر های خاص – تعریف شده در routes.js) بود. در این جلسه نوبت به بررسی دو روش نهایی است که یکی از آن ها مربوط به ورودی URL ها و روش بعدی مربوط به خروجی URL ها است.
روش سوم به جای اینکه از main.js یا routes.js استفاده کند، مستقیما روی خود کامپوننت پیاده سازی می شود. من می خواهم مثال جلسه قبل را ادامه دهم بنابراین باید به فایل userDetail.vue برویم و درون شیء Vue از متد خاصی به نام beforeRouteEnter استفاده کنیم:
<script> export default { data() { return { link: { name: "userEdit", params: { id: this.$route.params.id }, query: { locale: "en", q: 100 }, hash: "#data" } }; }, beforeRouteEnter(to, from, next) { if (true) { next(); } else { next(false); } } }; </script>
باید نکاتی را در رابطه با کد بالا خدمت شما عرض کنم. اول از همه توجه داشته باشید که این متد مانند lifecycle hook ها اجرا می شود بنابراین نباید آن را درون methods قرار دهید. نکته دوم این است که این متد دقیقا مانند متدهای قبلی کار می کند و همان سه آرگومان to و from و next را می گیرد اما تفاوت بسیار مهمی در مورد next وجود دارد: این کامپوننت (UserDetail) ساخته نمی شود مگر بعد از صدا زدن next. آیا می دانید این مسئله به چه معناست؟ این مسئله یعنی در این متد نمی توانید به خصوصیات data دسترسی داشته باشید چرا که اصلا این کامپوننت هنوز ساخته نشده است. مثلا کد زیر غلط است:
beforeRouteEnter(to, from, next) { this.link next(); }
یعنی دسترسی پیدا کردن به خصوصیت link غیر ممکن است. البته اگر واقعا مجبور هستید که به خصوصیات data در این فایل دسترسی داشته باشید، می توانیم یک متد را به عنوان آرگومان به next پاس بدهیم:
beforeRouteEnter(to, from, next) { next(vm => { vm.link; }); }
vm مخفف vue model است (یعنی همین instance یا نمونه از کلاس Vue یا به زبان ساده تر همین شیء Vue که در آن هستیم) و یک نام انتخابی است بنابراین لازم نیست حتما آن را vm بگذارید. بقیه کد نیز ساده است. حالا به کد اصلی خودمان برگردیم:
beforeRouteEnter(to, from, next) { if (true) { next(); } else { next(false); } }
من در اینجا یک شرط ساده گذاشته ام که همیشه اجرا می شود (چرا که true را به آن داده ام) بنابراین همیشه next اجرا خواهد شد و کامپوننت ما باز می شود. باز هم می گویم که در برنامه های واقعی باید کد های واقعی خودتان را بنویسید. اگر می خواهید باز نشدن کامپوننت را تست کنید، می توانید این کد را در برنامه خود قرار دهید:
beforeRouteEnter(to, from, next) { if (false) { next(); } else { next(false); } }
حالا اگر به http://localhost:8080/user رفته و روی هر کدام از سه کاربر ما کلیک کنید، هیچ اتفاقی نمی افتد.
محافظت از خروج از URL
حالت نوبت به بررسی خروج کاربر از URL ها است. اگر یادتان باشد یک دکمه ساده را در UserEdit.vue نوشتیم. حالا نوبت تعریف یک متد برای این دکمه است:
<template> <div> <h3>Edit the User</h3> <p>Locale: {{ $route.query.locale }}</p> <p>Analytics: {{ $route.query.q }}</p> <hr /> <button class="btn btn-primary" @click="confirmed = true">Confirm</button> <div style="height: 700px"></div> <p id="data">Some extra Data</p> </div> </template> <script> export default { data() { return { confirmed: false }; } }; </script>
همانطور که می بینید من یک listener را برای دکمه خودم در نظر گرفته ام که خصوصیتی به نام confirmed را روی true قرار می دهد. همچنین این خصوصیت را در script تعریف کرده ام. در مرحله بعد باید از متد beforeRouteLeave استفاده کنیم:
beforeRouteLeave(to, from, next) { if (this.confirmed) { next(); } else { if (confirm("Are you sure?")) { next(); } else { next(false); } } }
این متد مانند متدهای قبلی سه آرگومان to و from و next را می گیرد اما نکته مهمی در مورد آن وجود دارد: در این متد برخلاف beforeRouteEnter می توانیم به خصوصیات خود در data دسترسی داشته باشیم چرا که در هنگام اجرای این متد، کامپوننت قطعا ساخته شده است (ما در حال بستن این کامپوننت هستیم بنابراین قبلا حتما باز شده است که حالا می خواهد بسته شود). سپس خصوصیت confirmed را که خودمان تعریف کرده بودیم به شرط if پاس داده ام تا اگر true بود next اجرا شده و کامپوننت بسته شود. در غیر این صورت با متد confirm (یک متد جاوا اسکریپتی است و ربطی به Vue ندارد) از کاربر می پرسیم که آیا مطمئن است یا خیر؟ اگر پاسخ او مثبت بود که next را اجرا می کنیم تا کامپوننت بسته شود و در غیر این صورت کامپوننت را نمی بندیم.
معمولا این کار را در صفحات فرم یا صفحات پرداخت بانکی انجام می دهیم تا مطمئن شویم کاربر به اشتباه دستش به دکمه back نخورده باشد و صفحه را تصادفی نبندد.
- نصب و راهاندازی فریمورک 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