
در جلسه قبل در رابطه با درخواست های GET و همچنین پیکربندی تنظیمات پیش فرض روی شیء defaults صحبت کردیم. در این قسمت می خواهیم با یکی دیگر از ویژگی های بسیار کاربردی به نام interceptor ها آشنا شویم که در پکیج vue-resource نیز وجود داشتند. به زبان ساده interceptor ها توابعی هستند که قبل از ارسال تمام درخواست ها یا قبل از دریافت تمام داده ها روی آن درخواست/داده اجرا می شوند. حالا اینکه این توابع چه کاری با درخواست یا داده می کنند کاملا به خود ما و اینکه چه چیزی را درون تابع بنویسیم، بستگی دارد. بگذارید یک مثال را در فایل main.js بنویسیم:
axios.defaults.baseURL = 'https://vuejs-http-roxoir.firebaseio.com'; axios.interceptors.request.use(config => { console.log('request interceptors', config); return config; });
برای استفاده از interceptor ها باید ابتدا مانند کد بالا به شیء interceptors روی axios دسترسی پیدا کنیم و سپس request یا response را انتخاب کنیم. request یعنی می خواهیم interceptor ما روی درخواست ها اجرا شود و response یعنی باید روی پاسخ سرور یا داده های ورودی اجرا شود. در نهایت use را صدا می زنیم و یک تابع به عنوان آرگومان به آن می دهیم. این تابع به صورت خودکار شیء config را دریافت می کند که همان پیکربندی درخواست شما است و می توانید با استفاده از آن، درخواست خود را تغییر دهید اما من فعلا آن را log کرده ام. همچنین برای مشخص شدن اینکه دستور log مربوط به چه موردی است، آرگومان اول log را به صورت request interceptors نوشته ام. نکته مهم اینجاست که باید پس از انجام تغییرات حتما config را return کنید، در غیر این صورت درخواست هیچ وقت ارسال نخواهد شد. حالا اگر بخواهیم پاسخ دریافتی را نیز log کنیم می توان به شکل زیر عمل کرد:
axios.defaults.baseURL = 'https://vuejs-http-roxoir.firebaseio.com'; axios.interceptors.request.use(config => { console.log('request interceptors', config); return config; }); axios.interceptors.response.use(res => { console.log('response interceptors', config); return res; });
یادتان باشد که در اینجا res (مخفف response و به معنی «پاسخ») را return کنید و گرنه هیچ گاه داده ها را دریافت نخواهید کرد. مسئله بعدی اینجاست که در برخی از موارد نیاز داریم interceptor ها را از طریق کد و برنامه نویسی حذف کنیم (نه اینکه کدهایشان را از فایل main.js و به صورت دستی حذف نماییم). برای این کار متد eject را داریم که آیدیِ interceptor مورد نظر را می خواهد. id ها همیشه توسط متد use برگردانده می شود بنابراین بهتر است ابتدا آن را دریافت کنیم. برای انجام این کار، کافی است که interceptor های خود را درون یک ثابت بگذاریم:
const reqInterceptors = axios.interceptors.request.use(config => { console.log('request interceptors', config); return config; }); const resInterceptors = axios.interceptors.response.use(res => { console.log('response interceptors', config); return res; });
حالا می توانیم متد eject را صدا زده و نام این ثابت ها را به آن ها بدهیم:
const reqInterceptors = axios.interceptors.request.use(config => { console.log('request interceptors', config); return config; }); const resInterceptors = axios.interceptors.response.use(res => { console.log('response interceptors', config); return res; }); axios.interceptors.request.eject(reqInterceptors); axios.interceptors.response.eject(resInterceptors);
با اینکه دستور eject پس از این interceptor ها نوشته شده است، به هیچ کدام از آن ها اجازه اجرا نمی دهد بنابراین اگر حالا مرورگر خود را باز کرده و به صفحه dashboard بروید (آدرس http://localhost:8080/dashboard) دیگر دو دستور log ای را که قبلا در console مرورگر می دیدیم، نخواهید دید.
instanceهای axios
در حال حاضر ما از global instance (نمونه سراسری) axios استفاده می کنیم که در فایل main.js وارد (import) شده است که هیچ اشکالی ندارد. اگر برنامه شما از نظر پیکربندی و تنظیمات سراسری مشکلی ندارد، کارتان بی عیب و نقص است اما اگر برنامه شما دارای پیکربندی های سراسری مختلفی است، به مشکل برمی خورید. مثلا فرض کنید برنامه شما یک baseURL ندارد بلکه چندین baseURL دارد چرا که چندین و چند آدرس مختلف را هدف می گیرد. در این حالت نمی توانیم baseURL تعریف کنیم مگر اینکه چند instance مختلف از axios داشته باشیم.
من برای انجام این کار در پوشه Src یک فایل جدید به نام axios-auth.js می سازم. ما می خواهیم در این فایل instance های خودمان را داشته باشیم که فعلا یکی هستند اما زمانی که به فصل های پیوست بعدی برسیم، فرق خواهند کرد. در این فایل ابتدا باید axios را import کنیم:
import axios from 'axios';
سپس یک ثابت را تعریف می کنید و هر نامی که خواستید را برایش انتخاب می نمایید. مقدار این ثابت باید متد axios.create باشد:
import axios from 'axios'; const instance = axios.create({ baseURL: 'https://vuejs-http-roxoir.firebaseio.com' });
همانطور که در این کد می بینید من یک ثابت به نام instance ساخته ام و baseURL را به عنوان یکی از خصوصیات شیء جاوا اسکریپتی (آرگومان) به آن پاس داده ام. البته شما می توانید خصوصیات دیگری را نیز در این قسمت ذکر کنید که در صفحه گیت هاب axios ذکر شده است. حالا این baseURL فقط برای این instance تنظیم شده است نه کل برنامه شما. حتی اگر headerهای درخواست را به شکل زیر تعیین کنیم، فقط برای درخواست هایی اعمال می شود که با این instance ارسال شده باشند:
import axios from 'axios'; const instance = axios.create({ baseURL: 'https://vuejs-http-roxoir.firebaseio.com' }); instance.defaults.headers.common['SOMETHING'] = 'something';
من یک header ساده به نام SOMETHING را تعریف کرده ام که مقدارش برابر something باشد. در نهایت باید این instance را export کنیم تا بتوانیم در فایل های دیگر از آن استفاده کنیم:
import axios from 'axios'; const instance = axios.create({ baseURL: 'https://vuejs-http-roxoir.firebaseio.com' }); instance.defaults.headers.common['SOMETHING'] = 'something'; export default instance;
حالا به فایل signup.vue رفته و به جای وارد کردن axios، این فایل را وارد آن می کنم تا از این instance استفاده کنیم:
<script> import axios from "../../axios-auth"; export default { data() { return { email: "", age: null, // بقیه کدها //
از آنجا که نام import را تغییر نداده ایم (هنوز Axios است) نیازی به تغییر کدها نداریم. در حال حاضر اگر به مرورگر رفته و یک بار دیگر فرم ثبت نام را submit کنید، در سربرگ network از devtools مرورگر، می توانید header ما را مشاهده کنید:

بنابراین همه چیز به خوبی کار می کند!
- نصب و راهاندازی فریمورک 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