فصل پیوست ۲: بهینه‌سازی برنامه و Path Guard

در قسمت قبل موفق شدیم که کاربر را ثبت نام و 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 شود.

در قسمت های بعدی به حل این موضوعات می پردازیم.