前回に引き続き、Nuxt.jsのアプリケーションを作っていきます。
今回は、今まで準備してきたログイン機能を実際に動かしていきましょう。
前回はこちらからどうぞ。
ログイン機能の実装（store）
ログイン機能は基本的に
「loginState(ここは変数ですので自分で名前を決めることができます。)という状態がtrueの時に画面を表示し、falseの時に問答無用でログイン画面に戻す。」
という操作のことを指します。
状態の操作を行うので、まずはその１で触れたように/storeをいじくります。
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の値を加工することができます。
例で見た方が早いので、以下を見てください。
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)を呼ぶと、
[
{name: "A", time: 9.8},
{name: "D", time: 5.2},
{name: "E", time: 10},
]
となります。
以上が、storeで主に使っていく機能です。
今回は、stateとmutationsのみで製作していきます。
ログイン機能の実装（layouts/page）
ではここまでで作ってきたログイン機能を実際に動かすレイアウトを整えていきましょう。
まずは全体を表示するlayoutsからです。
layoutsは基本的に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をいじっていきましょう。
<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特有の関数です。(詳しくは公式を確認してください)
次に遷移先のページを作りましょう。
今回はthis.$router.push("top")というように、pages/top.vueという所に画面遷移をしてみます。
($routerの書き方は、その１のmethodsをみてください。)
では、pages/top.vueを作っていきましょう。
<template>
<v-content>
<h3 style="color: black">topです。</h3>
</v-content>
</template>
<script>
</script>
とりあえずこんな感じにしました。
このページでは、まだ特に関数も必要ないので<template>だけで大丈夫です。
では実装してみましょう！
いい感じになりましたね。
まとめ
ここまでで一旦のログイン機能は完成です。
以降はリダイレクト処理、細かなVuetifyコンポーネントについて触れていきたいです。
また、間違っている点があれば教えてください！！