🔰【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。 その３

前回に引き続き、Nuxt.jsのアプリケーションを作っていきます。
今回は、今まで準備してきたログイン機能を実際に動かしていきましょう。

前回は[こちら](https://qiita.com/sychocola1/items/e7ca6a0bac16a9f8f3fa)からどうぞ。

##ログイン機能の実装（store）
ログイン機能は基本的に
「`loginState`(ここは変数ですので自分で名前を決めることができます。)という状態が`true`の時に画面を表示し、`false`の時に問答無用でログイン画面に戻す。」
という操作のことを指します。
状態の操作を行うので、まずは[その１](https://qiita.com/sychocola1/items/6aa185960a9f4e40d3d0)で触れたように`/store`をいじくります。
`store/index.js`のファイルを作りここに記述していきます。

```store/index.js
// 保持させるデータ
export const state = () => ({
  mailAddress: '',
  password: '',
  loginState: false,
})

// 同期処理
export const mutations = {

  // ログイン処理
  loginState(state, mailAddress, password) {
    state.mailAddress = mailAddress;
    state.password = password;
    state.loginState = true;
  },
  //ログアウト処理
  logoutState(state) {
    state.loginState = false;
  },
}
```
ここで`state`と`mutations`が出てきました。
`store`を使う上で非常に重要になってくるので、まとめて説明します。

###storeの機能
####state
アプリケーション内に共通の変数(グローバル変数)を管理するところです。
今回は`mailAddress`・`password`を空に、`loginState`を`false`に初期設定しています。
ここで扱っているものは、アプリケーションどこからでも`this.$store.state.ファイル名(index.jsなら省略).変数名`でアクセスできます。

####mutations
`state`で設定した、変数を更新することができます。
ただし、非同期処理はできせん。非同期処理を行う場合は後述の`actions`が必須になります。
ここで扱っているものは、アプリケーションのどこからでも`this.$store.commit('musation名', this.変数名, this.変数名, ~~~~~);`
みたいな感じになります。
必ず`commit`で呼び出さなければいけない事を覚えといてください。

`store`には主に残り２つ機能があリます。
折角ですので、紹介させてもらいます。

####actions
基本的には、`mutations`を非同期処理したくなった時に使う機能です。
ここで扱っているものは、アプリケーションのどこからでも`this.$store.dispatch('action名', this.変数名, this.変数名, ~~~~~);`

####getters
ここでは`state`の値を加工することができます。
例で見た方が早いので、以下を見てください。

```store/hoge.js
export const state = {
 runners: [
  {name: "A", time: 9.8},
  {name: "B", time: 10.1},
  {name: "C", time: 12},
  {name: "D", time: 5.2},
  {name: "E", time: 10},
 ]
},

export const getters = {
  getRuners: state => {
    return state.runners.filter(runner => runner.time <= 10)
  },

  fetchName: (state, getters) => {
    getters.getRunners.forEach(runner => console.log(runner.name))
  }
}
```
これで`this.$store.getters(fetchName)`を呼ぶと、

```console.
[
 {name: "A", time: 9.8},
 {name: "D", time: 5.2},
 {name: "E", time: 10},
]
```
となります。

以上が、`store`で主に使っていく機能です。
今回は、`state`と`mutations`のみで製作していきます。

##ログイン機能の実装（layouts/page）
ではここまでで作ってきたログイン機能を実際に動かすレイアウトを整えていきましょう。
まずは全体を表示する`layouts`からです。
`layouts`は基本的に`layouts/default.vue`のみしかいじりません。

```layouts/default.vue
<template>
  <v-app>

    <v-content>
      <v-container>
        //この<nuxt />にpageが表示されていく
        <nuxt />
      </v-container>
    </v-content>

  </v-app>
</template>
```

基本はこれだけで大丈夫です。

次に、`<nuxt />`に表示させていく`pages`を作っていきましょう。
まずスタートの画面となる`pages/index.vue`をいじっていきましょう。

```pages/index.vue
<template>
  <v-container>
    <h3 style="color: black; text-align: center">ログイン</h3>
    <!-- ここにメールアドレスとパスワードを入力してもらう。それぞれmailAddress/passwordという変数に格納される。 -->
    <v-text-field v-model="mailAddress" label="メールアドレス" light></v-text-field>
    <v-text-field v-model="password" label="パスワード" light></v-text-field>
    <!-- エラー時（validがtrue時）にvalidErrorを表示させる -->
    <p class="errorMessage" style="color: red" v-if="valid">{{validError}}</p>
    <v-btn @click="login()"> ログイン </v-btn>
  </v-container>
</template>

<script>
import firebase from "~/plugins/firebase.js";

export default{
  data() {
    return {
        mailAddress: '', //打ち込んでもらうメールアドレス
        password: '', //打ち込んでもらうパスワード
        valid: false,　//打ち込んだメールアドレス・パスワードが正しくない時はtrue、正しい時はfasle
        validError: "UserIDまたはPasswordが間違っています", //validがtrueの時に表示するメッセージ
    }
  },
  methods: {
    login: function() {
      //ここはただのfirebaseの公式の関数なので、あまり気にしなくて大丈夫です。
      firebase.auth().signInWithEmailAndPassword(this.mailAddress, this.password)
       .then(user => {
        //storeのmutationsの`loginState`を呼び出す
        this.$store.commit('loginState', this.mailAddress, this.password);
        // ログインしたら飛ぶページを指定
        this.$router.push("top");
        //エラーがおきたら、以下の処理
      }).catch((error) => {
        this.valid = true;
      });
    },
  },
}

</script>
```

ここにある`methods`でそのページ内の関数を定義します。
今回は、loginで最低限のログイン機能を実装しています。
`firebase.auth().signInWithEmailAndPassword`は「メールアドレスとパスワードでログインしますよ。」という`Firebase`特有の関数です。(詳しくは[公式](https://firebase.google.com/docs/auth/web/password-auth?hl=ja)を確認してください)

次に遷移先のページを作りましょう。
今回は`this.$router.push("top")`というように、`pages/top.vue`という所に画面遷移をしてみます。
(`$router`の書き方は、[その１](https://qiita.com/sychocola1/items/6aa185960a9f4e40d3d0)の`methods`をみてください。)
では、`pages/top.vue`を作っていきましょう。

```pages/top.vue
<template>
  <v-content>
    <h3 style="color: black">topです。</h3>
  </v-content>
</template>

<script>
</script>
```
とりあえずこんな感じにしました。
このページでは、まだ特に関数も必要ないので`<template>`だけで大丈夫です。
では実装してみましょう！

![QiitaExample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/e3ac4f91-2c27-3736-4848-477fbe3efd07.gif)

いい感じになりましたね。


##まとめ
ここまでで一旦のログイン機能は完成です。
以降はリダイレクト処理、細かな`Vuetifyコンポーネント`について触れていきたいです。
また、間違っている点があれば教えてください！！