技術書のちょい足し4をやってみた

見ていただきありがとうございます！！

git

着手

やりたいこと

認証後に数秒表示される、ログイン画面を表示させない。
＋
読み込み画面を表示。

現状説明

---

ログインをクリック

---

アカウントを選択

---

**２，３秒ほどログイン画面が表示される

---

エディター画面が表示される

---

２．３秒表示される、ログイン画面を読み込み画面にします。

考えてみる

ログイン画面が再度表示されるのはなぜか

1. Google認証後、WEBアプリの画面に戻ってくる
2. 認証前の画面が表示される
3. 認証が完了する
4. 認証後の画面が表示される

いけそうな方法

• 認証完了後に画面を表示させる
  1. created: function(),beforeCreate: function()というものがあるので完了後、完了前という意味で行けそう
  2. ログインボタンを押したときに何らかの方法で画面を表示させないようにし、認証後画面を表示

やってみた

1 beforeCreate: function(),created: function()を使う

結果

できなかった

---

なぜ?

---

自分の想像

認証完了＝＞画面作成開始＝＞認証後画面表示

---

現実

認証開始＝＞画面作成開始＝＞認証前画面表示＝＞認証完了＝＞認証後画面表示

---

てことで次へ

2. ログインボタンを押したときに何らかの方法で画面を表示させないようにし、認証後画面を表示

何らかの方法を考えてみた。

1. ログインボタンを押すときに、googleLogin: function()という関数を使用している
2. 関数内に、読み込み完了の意味を持つ、loaded関数を置き、ログインボタンを押したときに、falseを代入
3. ログイン認証が完了したら、loadedにtrueを代入
4. 表示

以上の方法を成功させるために、

ユーザーがページにアクセスしたタイミングでは、読み込まれていない。
なので、loadedはfalseを初期値にしたい。
ため、data()関数？宣言？フィールド？にloaded: falseを追加

ログインボタンを押したときに、読み込み中にしたいため、
ログインボタンを押した時に呼び出される、googleLogin: function()にthis.loaded:false;を追加

google認証をしたか、していないかにかかわらず、読み込みは完了する。（認証完了画面or認証未完画面）
なので、google認証を通過したかを監視している、
firebase.auth().onAuthStateChanged関数の中に、this.loaded = true:を追加のif文のtrue,elseブロック両方にthis.loaded:trueを追加
（true,elseブロックではなく、if文終了後に追加してみたが、それだと、現状と同じ反応（ログイン画面が再度表示されてしまう）をしたため、却下。google認証は常に作動していて、firebase.auth().onAuthStateChanged(user => {}、の処理は常に行われているが、認証されていれば user オブジェクトに値が設定され、未認証であれば、null が設定されるため、if(null)書いていて思いました。これはおかしい。）

読み込みが未完了の時(loaded = false)の時は、画面を表示せず、
読み込んでいます。と表示したいため、もとからあったコンポーネントを表示する判定の箇所にloadedを追加。+ !loaded判定をもつ

ソースコード

（二週目なのでWebpackSimple？でなく、Webpack？を使いました。うまく動かないかもしれません）

Home.vue

<template>
  <div id="home">
    <h1>{{msg}}</h1>
    <button @click="googleLogin">Googleアカウントでログイン</button>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      msg: "Welcome to MyMarkdown"
    };
  },
  methods: {
    googleLogin: function() {
      firebase
      .auth()
      .signInWithRedirect(new firebase.auth.GoogleAuthProvider());
      this.loaded = false;//追加
    }
  }
};
</script>

App.vue

<template>
  <div id="app">
    <Home v-if="!isLogin && loaded"></Home>//一部追加
    <Editor v-if="isLogin && loaded" :user="userData"></Editor>//一部追加
    <p v-if="!loaded">よみこんでいます</p>//追加
  </div>
</template>

<script>
import Home   from "./components/Home.vue";
import Editor from "./components/Editor.vue";

export default {
  name: 'app',
  data() {
    return {
      isLogin: false,
      userData: null,
      loaded: false//追加
    };
  },
  beforeCreate: function() {
    firebase.auth().onAuthStateChanged(user => {
      console.log(user);
      if(user) {
        this.isLogin = true;
        this.userData = user;
      } else {
        this.isLogin = false;
        this.userData = null;
      }
      this.loaded = true;//追加
    });
  },
  components: {
    Home: Home,
    Editor: Editor
  }
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

技術書

リンク

改訂新版-Vue-jsとFirebaseで作るミニWebサービス-技術書典シリーズ（NextPublishing）-渡邊-達明

今回やったこと

ちょい足しポイント４です

参考リンク

以下のリンクの方がすでに答えのようなものを載せていてくれましたが、別の方法はないか考えました。

勉強になりました
https://webbibouroku.com/Blog/Article/firebase-auth#outline__6_1

おまけ

環境

windows10

できること

画面をキャプチャし、クリップボードにコピー
（右クリックの貼り付けで張り付けれます。どこかに保存されるかと思って探し回りました( ;∀;)）

ショートカットキー

Windows + shift + s

できること

画面をキャプチャし、クリップボードにコピー

手順

ショートカットキー押す
画面が、うっすら白くなる
クリック、ドラックした範囲をクリップボードにキャプチャ

なにがいいのか

Qiitaにこの画像を張り付けたい！！と思ったその時にすぐ、コピペできる！！