
در قسمت قبل موفق شدیم که یکی از مشکلات اصلی برنامه خود را حل کنیم: بهینه سازی UI و UX با نمایش مشروط لینک ها در navigation و همچنین اضافه کردن navigation guard ها در مسیر dashboard. ممکن است از جلسه قبل سوالی برایتان پیش آمده باشد که اگر قرار است در صورت login نبودن کاربر اصلا لینک dashboard را در برنامه نمایش ندهیم، پس چرا از navigation guard برای آن استفاده کردیم؟ مسئله اینجاست که عدم نمایش لینک در navigation با عدم دسترسی به لینک برابر نیست. اگر navigation guard را تعریف نکرده بودیم، کاربر می توانست آدرس dashboard را به صورت دستی وارد کرده (http://localhost:8080/dashboard) و به آن صفحه برود. باید این نکته مهم و تفاوت اصلی را درک کنید تا بتواند برنامه های امنی بسازید.
بحث این جلسه ما در مورد یکی از دو مشکل اساسی برنامه است:
- در حال حاضر هیچ راهی برای logout شدن نداریم به جز اینکه صفحه را refresh کنیم که اصلا از نظر UI و UX جالب نیست. ما باید دکمه جداگانه ای را برای عملیات logout داشته باشیم تا کاربران بتوانند با آن از حساب خود خارج شوند.
- در حال حاضر داده ها persist نمی شوند. یعنی اگر کاربری login شود و صفحه را refresh کند، توکن امنیتی از بین رفته و دیگر login نخواهد بود چرا که از vuex برای ذخیره داده ها استفاده می کنیم و vuex یک پکیج مدیریت state است و state برنامه های وب با refresh شدن از بین می رود مگر آنکه داده ها در جایی مانند localstorage مرورگر persist شود.
ما در این جلسه با دکمه logout شروع می کنیم. برای اضافه کردن این گزینه باید به فایل header.vue رفته و یک <li> جدید را به <ul> اضافه کنید:
<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> <li> <button class="logout">Logout</button> </li> </ul> </nav>
همانطور که می بینید به این دکمه، یک کلاس logout را داده ام بنابراین باید این کلاس را در قسمت <styles> تعریف کنیم:
/* بقیه کلاس ها */ li a { text-decoration: none; color: white; } li a:hover, li a:active, li a.router-link-active { color: #fa923f; } .logout { background-color: transparent; border: none; font: inherit; color: white; cursor: pointer; } </style>
حالا دکمه ما ظاهر بهتری پیدا می کند اما هنوز منطقی را برایش ننوشتیم تا آن را اجرا کند:
<li> <button @click="onLogout" class="logout">Logout</button> </li>
یعنی با کلیک روی این دکمه متد onLogout اجرا می شود. قدم بعدی تعریف کردن این متد است بنابراین:
<script> export default { computed: { auth() { return this.$store.getters.isAuthenticated; } }, methods: { onLogout() { } } }; </script>
به نظر شما درون این متد باید چه چیزی را بنویسیم؟ من می خواهم یک action را در اینجا dispatch کنم که idToken و userIdما را از State حذف کند. برای این کار باید به فایل store.js رفته و یک mutation جدید را تعریف کنیم:
mutations: { authUser(state, userData) { state.idToken = userData.token; state.userId = userData.userId; }, storeUser(state, user) { state.user = user; }, clearAuthData(state) { state.idToken = null; state.userId = null; } },
حالا می بینید که تنها کار این mutation تنظیم idToken و userId روی null است. حالا action مورد نظر برای این mutation را تعریف می کنیم:
logout({ commit }) { commit('clearAuthData'); }, storeUser({ commit, state }, userData) { if (!state.idToken) { return; } globalAxios.post('/users.json' + '?auth=' + state.idToken, userData) .then(res => console.log(res)) .catch(error => console.log(error)) },
logout نام انتخابی من است و تنها کاری که انجام می دهد commit کردن mutation ما است. با این کار می توانیم به فایل header.vue برگشته و متد onLogout را تکمیل کنیم:
<script> export default { computed: { auth() { return this.$store.getters.isAuthenticated; } }, methods: { onLogout() { this.$store.dispatch("logout"); } } }; </script>
پس از ذخیره این کدها به مرورگر می رویم و login می شویم. به محض login شدن مثل قبل دکمه های sign in و sign up ناپدید می شوند و با کلیک روی logout عملیات بدون مشکل انجام می شود (اگر از vue developer tools کمک بگیرید، مشخص می شود که idToken و userId هر دو null شده اند) اما چند مشکل کوچک وجود دارد. اولا زمانی که روی logout کلیک می کنیم، پس از خروج کاربر، دکمه logout از بین نمی رود و سر جایش باقی می ماند. این مشکل با کد زیر حل می شود:
<li v-if="auth"> <button @click="onLogout" class="logout">Logout</button> </li>
حالا فقط زمانی که login باشیم، دکمه logout را مشاهده خواهیم کرد. مشکل دوم اینجاست که اگر اول login شویم، سپس به صفحه dashboard برویم و سپس logout شویم، روی صفحه dashboard باقی می مانیم! برای حل این مشکل به فایل store.js رفته و router را در آن import می کنیم:
import Vue from 'vue' import Vuex from 'vuex' import axios from "./axios-auth"; import globalAxios from "axios"; import router from './router';
سپس به action ای به نام logout می رویم تا پس از commit کردن clearAuthData، کاربر را به صفحه دیگری منتقل کنیم:
logout({ commit }) { commit('clearAuthData'); router.replace('/signin'); },
با این کار پس از logout شدن، به صفحه signin منتقل می شویم. تفاوت replace با push این است که replace به ما اجازه زدن دکمه back و برگشتن به صفحه قبلی را نمی دهد. حالا مشکل ما حل می شود اما هنوز مشکل بزرگتری داریم: در حال حاضر داده ها persist نمی شوند. یعنی اگر کاربری login شود و صفحه را refresh کند، توکن امنیتی از بین رفته و دیگر login نخواهد بود. همچنین هر توکن firebase یک ساعت تاریخ انقضاء دارد و ما هیچ منطقی را برای چک کردن این موضوع نداریم تا کاربر را پس از یک ساعت، به صورت خودکار logout کنیم. در قسمت های بعدی این کار را انجام خواهیم داد.
- نصب و راهاندازی فریمورک 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