فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده

در قسمت قبل توانستیم با موفقیت توکن امینیتی را از firebase دریافت کرده و سپس آن را با vuex ذخیره کنیم اما هنوز هیچ کار دیگری با آن نمی کنیم. باید از خودمان بپرسیم که این توکن اصلا برای چه کاری است؟ درست است! این توکن باید به درخواست هایی متصل شود که به سمت منابع محافظت شده می روند. منظور از منابع محافظت شده، هر چیزی در اینترنت است که برای دسترسی به آن نیاز به مجوز داشته باشیم، حالا این مجوز چه به صورت توکن امنیتی باشد، چه به صورت رمز عبور و ایمیل و چه به هر صورت دیگری باشد. در حال حاضر برنامه ما در صفحه dashboard اطلاعات کاربران را از پایگاه داده firebase می گیرد که از منابع محافظت شده هستند (Firebase از ما توکن می خواهد و گرنه قادر به خواندن اطلاعات (read) نخواهیم بود). درخواست GET ما برای دریافت داده های کاربران در فایل dashboard.vue به شکل زیر است:

created() {
  axios
    .get("/users.json")
    .then(res => {
      console.log(res);
      const users = [];
      const data = res.data;
      for (let key in data) {
        const user = data[key];
        user.id = key;
        users.push(user);
      }
      console.log(users);
      this.email = users[0].email;
    })
    .catch(error => console.log(error));
}

اما هیچ توکنی به این درخواست متصل نشده است. در قدم اول دوست دارم که این درخواست Axios را به یک action در فایل Store.js منتقل کنیم بنابراین باید آن را کات کرده و به فایل store.js برویم:

// بقیه کدها //
login({ commit }, authData) {
  axios
    .post(
      "/accounts:signInWithPassword?key=AIzaSyDtirb936QLEAL9Hbkn1st5c3cF3U7_cFI",
      {
        email: authData.email,
        password: authData.password,
        returnSecureToken: true
      }
    )
    .then(res => {
      console.log(res);
      commit('authUser', {
        token: res.data.idToken,
        userId: res.data.localId
      });
    })
    .catch(error => console.log(error));
},
fetchUser({ commit }) {
  axios
    .get("/users.json")
    .then(res => {
      console.log(res);
      const users = [];
      const data = res.data;
      for (let key in data) {
        const user = data[key];
        user.id = key;
        users.push(user);
      }
      console.log(users);
      this.email = users[0].email;
    })
    .catch(error => console.log(error));
}
// بقیه کدها //

نام action جدید من fetchUser است اما شما می توانید هر نام دیگری را انتخاب نمایید. البته قبل از ادامه کار باید دو نکته مهم را برایتان توضیح بدهم. زمانی که ما فرم ثبت نام را پُر می کنیم، هیچ اطلاعاتی را در پایگاه داده خودمان در firebase ذخیره نمی کنیم بلکه ثبت نام کاربران، باعث ذخیره شدن داده های آن ها در یک پایگاه داده دیگر در Firebase می شود. اگر یادتان باشد در قسمت های قبلی دو قسمت جدا به نام database و authentication داشتیم. پایگاه داده شخصی ما در Firebase با پایگاه داده احراز هویتِ firebase متفاوت هستند چرا که ما به پایگاه داده authentication دسترسی نداریم و نمی توانیم آن را ویرایش کنیم. با این حساب باید در action مربوط به signup یک action دیگر را صدا بزنیم که داده های کاربر را در پایگاه داده خودمان نیز ذخیره کند. این کار ما را به نکته دوم می رساند: baseURL برای ثبت نام کاربران در پایگاه داده authentication و برای ثبت داده های کاربران یا دریافت داده هایشان (read یا write) از پایگاه داده شخصی خودمان، کاملا متفاوت است.

با توجه به این دو نکته، ابتدا به فایل store.js بروید و instance سراسری و اصلی axios را نیز در آن وارد کنید:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from "./axios-auth";
import globalAxios from "axios";

globalAxios (این نام سلیقه ای است) همان instance ای است که من با آن داده ها را دریافت کرده یا در پایگاه داده خودمان ثبت می کنم. حالا یک action جدید به نام storeUser ایجاد می کنم:

// بقیه کدها //
storeUser({ commit }, userData) {
  globalAxios.post('/users.json', userData)
    .then(res => console.log(res))
    .catch(error => console.log(error))
},
fetchUser({ commit }) {
     globalAxios
    .get("/users.json")
// بقیه کدها //

همانطور که مشخص است کار این action، ثبت userData (داده های کاربر) در پایگاه داده خودمان است. حالا باید این action را در action دیگری به نام signup صدا بزنیم تا زمانی که کاربر در پایگاه داده authentication ذخیره شد، داده هایش را در پایگاه داده خودمان نیز ذخیره کنیم. در ضمن توجه کنید که fetchUser را نیز تغییر داده ام تا به جای axios از globalAxios استفاده کند (با این کار baseURL صحیح برای دریافت داده ها خواهیم داشت). خوشبختانه شیء context ای که به action ها داده می شود و ما از آن commit را استخراج می کنیم، متد dispatch را نیز به ما می دهد بنابراین می توان گفت:

signup({ commit, dispatch }, authData) {
  axios
    .post("/accounts:signUp?key=AIzaSyDtirb936QLEAL9Hbkn1st5c3cF3U7_cFI", {
      email: authData.email,
      password: authData.password,
      returnSecureToken: true
    })
    .then(res => {
      console.log(res);
      commit('authUser', {
        token: res.data.idToken,
        userId: res.data.localId
      });
      dispatch('storeUser', authData)
    })
    .catch(error => console.log(error));
},

در این کد و در قدم اول dispatch را نیز علاوه بر commit از شیء context استخراج کرده ام تا بتوانم آن را صدا بزنم. سپس پس از commit کردن authUser، اکشن storeUser را dispatch کرده ام و authData را به آن پاس داده ام. مشکل اینجاست که authData فقط ایمیل و پسورد کاربر را داشت بنابراین به signup.vue می رویم و به جای پاس دادن شیء ساده، کل formData را پاس می دهیم:

onSubmit() {
  const formData = {
    email: this.email,
    age: this.age,
    password: this.password,
    confirmPassword: this.confirmPassword,
    country: this.country,
    hobbies: this.hobbyInputs.map(hobby => hobby.value),
    terms: this.terms
  };
  console.log(formData);
  this.$store.dispatch("signup", formData);
}

با این کار باید کدهای ما کار کنند. برای تست آن ها ابتدا به firebase بروید و از سربرگ rules، دستور write را نیز به شکل دستور read در بیاورید تا دسترسی نوشتن اطلاعات نیز فقط برای افراد login شده میسر باشد:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

پس از تغییر این کدها یادتان نرود که دکمه publish را بزنید. حالا اگر به صفحه Signup رفته و با یک ایمیل جدید یک حساب کاربری جدید ایجاد کنید، خطا دریافت خواهید کرد. چرا؟ در قسمت بعد این موضوع را بررسی خواهیم کرد.