Feat/pages/home

[hiroto0222]

Issue: #1

• プルリクの内容・コードの量が多くなってしまい、申し訳ございません 🙇

目的

• HomePage のレイアウト作成
• Firebase の追加
• Firebase での Google 認証システムの追加
• 要認証ナビゲーションガード

達成条件

• .env で Firebase の環境変数が定義できる
• ログイン
  • SettingsPage へ遷移する
  • 全ページへアクセス可能
• ログアウト
  • HomePage へ遷移する
  • HomePage, FaqPage のみアクセス可能
• アプリをアクセスする際、前回のログイン状態が記録されている

実装の概要

• Firebase の初期化

  • dotenv モジュールを使って環境変数を .env ファイルで定義出来るようにした
  • 環境変数を quasar framework 内で使えるように、 quasar.conf.js で envparser を build に追加
  • 参考にした記事 -> https://dev.to/jotcomponents/how-use-env-files-in-quasar-1k55

• Firebase 認証

  • Vuex で auth-store を作成し以下の state を保持
  • onAuth アクション
  • App.vue がマウントされる際に onAuth アクションを呼び出し、ログイン状態のオブサーバーを作成する
  • Firebase は自動的に現ユーザーのログイン状態を記憶するため、LocalStorage は不要
  • ログイン状態が確認出来るように Header に一時的にユーザー情報を追加しています

    const state = {
    authIsReady: false,  // ログイン状態が確認出来た際 true
    user: null,  // ユーザーの情報 { displayName, photoURL }
    loggedIn: false,  // ログイン状態
    error: null,  // 認証によるエラーを保持
    };

• 要認証ナビゲーションガード / Routes

  • router/index.js 内でルートアクセスを制限
  • 各ルートに name, meta: { requiresAuth: true || false } を追加

レビューして欲しいところ

• Quasar での dotenv を使った環境変数の定義の仕方
• Vuex actions でのページ遷移の仕方
• boot でルートアクセスを制限した方が良いのか

不安に思っていること・質問

• Vue と Quasar にまだ慣れていない為、コードの書き方の改善点などありましたら教えてください！

[tkwonn]

@hiroto0222 ローカルで実行してみて特に気になる部分はなかったです！いいと思います！

細かいですが、他のページでリロードした時でもSettingsページに行ってしまったり、もしユーザがゲーム中に他のページに遷移したり、ゲームページ内でリロードした時の挙動も余裕があれば今後確認していきたいですね。

[tkwonn]

次のIssueを出すのでマージしちゃいます！

[hiroto0222]

レビューありがとうございます！

細かいですが、他のページでリロードした時でもSettingsページに行ってしまったり、もしユーザがゲーム中に他のページに遷移したり、ゲームページ内でリロードした時の挙動も余裕があれば今後確認していきたいですね。

現在 onAuth アクション内でログインしている場合 SettingsPage へ遷移するという処理を行っていますが、login アクション内でその処理を行った方が良いですね。