
یکی دیگر از مباحث مربوط به Routing مربوط به کنترل کردن فرآیند navigation (جابجا شدن بین صفحات) است. در برخی اوقات باید مشخص کنیم که آیا یک کاربر خاص اجازه دارد که URL خاصی را وارد کرده و از آن بازدید کند یا اینکه آیا اجازه دارد از URL خاصی خارج شود؟ مثلا ما در کامپوننت UserDetail.vue هستیم و این کامپوننت دکمه ای به نام Edit User (ویرایش کردن کاربر) دارد. آیا هر کاربری مجاز است که با کلیک روی این دکمه به صفحه ویرایش کاربران برود و بتواند کاربران ما را ویرایش کند؟ قطعا خیر! یا اصلا اگر قرار است کاربر اطلاعات خودش را ویرایش کند حتما باید چک کنیم که Login شده باشد. همچنین می خواهیم خروج کاربر از صفحه UserEdit.vue را نیز کنترل کنیم و من این کار را با یک دکمه ساده انجام می دهم (فایل 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">Confirm</button> <div style="height: 700px"></div> <p id="data">Some extra Data</p> </div> </template>
یعنی کاربر باید در صفحه ویرایش کاربران، تغییرات را تایید (confirm) کند تا بتواند از آن صفحه خارج شود. اگر confirm نکرده باشد، از او می پرسیم که بدون تایید کردن، ویرایش ها اعمال نمی شوند. آیا مطمئن است که می خواهد خارج شود یا نه؟ بنابراین دو قسمت مجزا خواهیم داشت:
- محافظت قبل از اینکه کاربر وارد URL خاصی شود (آیا او اجازه دارد این مسیر را باز کند؟). این مرحله را می توانیم به سه شکل مختلف اجرا کنیم.
- محافظت پس از اینکه کاربر وارد URL خاصی شده است (آیا او اجازه ترک این مسیر را دارد؟). این مرحله به یک شکل انجام می شود.
با این حساب مجموعا چهار شکل مختلف برای استفاده از gaurd ها داریم. ما در این جلسه با دو مورد اول (وارد شدن به URL های خاص) شروع می کنیم. برای پیاده سازی روش اول باید ابتدا به فایل main.js برویم. ما router خود را در این فایل تعریف کرده و آن را به شیء سراسری Vue پاس داده ایم. حالا باید قبل از پاس دادن آن به Vue بگوییم:
router.beforeEach((to, from, next) => { console.log('global beforeEach'); next(); }); new Vue({ el: '#app', router, render: h => h(App) })
من متد beforeEach را از router صدا زده ام. این متد همانطور که از نامش مشخص است (before یعنی «قبل از» و each یعنی «هر کدام» بنابراین می شود «قبل از هر کدام») قبل از ورود به هر صفحه اجرا خواهد شد. از آنجایی که این تابع روی تک تک صفحات اجرا خواهد شد، فقط می توانیم بررسی های کلی (نه کارهای مخصوص به هر کاموننت) را در آن انجام بدهیم. همچنین از کد بالا مشخص است که آرگومان این متد یک تابع است که سه آرگومان می گیرد:
- to یعنی به کدام صفحه خواهیم رفت.
- from یعنی از کدام صفحه می آییم.
- next یک تابع callback است که اجازه می دهد دستور ادامه پیدا کند (یعنی کاربر به صفحه مورد نظر خود منتقل شود). اگر next را صدا نزنید، درخواست متوقف شده و کاربر به هیچ صفحه ای نمی تواند برود. همچنین می توانید به خود next یک path (مثلا user/edit/) پاس بدهید تا کاربر را به صفحه دیگری منتقل کند.
من درون این تابع کار خاصی نکرده ام بلکه فقط عبارت global beforeEach (یعنی beforeEach سراسری) را log کرده ام تا در کنسول مرورگر آن را ببینیم. اگر حالا به مرورگر رفته و روی هر صفحه ای کلیک کنید یا صفحه مرورگر را refresh کنید، این عبارت را در کنسول خواهید دید. البته در برنامه های واقعی شما باید کدهای واقعی خودتان را درون آن بنویسید. مثلا چک کنید که کاربر برای بازدید از سایت شما (تک تک صفحات) حتما باید login باشد و یک منطق ساده login بودن را پیاده سازی کنید. مشکل این روش اینجاست که متد ما تک تک صفحات را چک می کند اما در بسیاری از اوقات فقط باید مسیر های خاصی را چک کنیم.
فرض کنید می خواهیم فقط از UserDetail.vue محافظت کنیم. برای انجام این کار به فایل routes.js می رویم و خصوصیت beforeEnter را برای UserDetail.vue می نویسیم:
export const routes = [ { path: '', name: 'Home', components: { default: Home, 'header-top': Header } }, { path: '/user', components: { default: User, 'header-bottom': Header }, children: [ { path: '', component: UserStart }, { path: ':id', component: UserDetail, beforeEnter: (to, from, next) => { console.log('inside route setup'); next(); } }, { path: ':id/edit', component: UserEdit, name: 'userEdit' } ] }, { path: '/redirect-me', redirect: { name: 'Home' } }, { path: '*', redirect: '/' } ];
همانطور که می بینید برای path: id که کامپوننت UserDetail را دارد، خصوصیتی به نام beforeEnter (یعنی «قبل از ورود») تعریف کرده ام که یک تابع است. شما می توانید این تابع را در یک فایل دیگر تعریف کرده و سپس مانند بقیه فایل ها در اینجا import کنید اما چون کدهای من کوتاه است تابع را در همین جا نوشته ام. باز هم می گویم که شما باید کدهای واقعی خودتان را به جای console.log قرار بدهید و این فقط یک مثال است. همچنین هیچ وقت یادتان نرود که next را صدا بزنید. حالا باید UserDetail را در مرورگر باز کنیم تا ببینیم log ما نمایش داده می شود یا خیر:

همانطور که می بینید ابتدا global beforeEach و سپس inside route setup اجرا شده اند. در جلسه بعد در مورد روش های سوم (مربوط به ورود به URL) و چهارم (مربوط به خروج از URL) صحبت خواهیم کرد.
- نصب و راهاندازی فریمورک 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