その４です。はやいものですね。
前回は登録画面を作成しました。今回はログイン画面を作成するところからはじめましょう。
ログイン画面を作成する
まずはviewsフォルダの中にSignin.vueファイルを作成します。作成したら以下のように記述しましょう。
<template>
<div class="signin">
<h2>Sign in</h2>
<input type="text" placeholder="メアド" v-model="username">
<input type="password" placeholder="パスワード" v-model="password">
<button @click="signIn">ログイン</button>
<p style="margin-top:20px;">パスワードわすれっちゃったの？ </p>
<input type="text" placeholder="メアドを書いてね" v-model="re_email">
<button @click="resetpass">リセットメールを送る</button>
</div>
</template>
<script>
import firebase from 'firebase'
export default {
name: 'Signin',
data: function () {
return {
username: '',
password: '',
re_email: ''
}
},
methods: {
signIn: function () {
firebase.auth().signInWithEmailAndPassword(this.username, this.password).then(
user => {
this.$router.push('/')
},
err => {
alert(err.message)
}
)
},
resetpass: function () {
const auth = firebase.auth()
const emailAddress = this.re_email
auth.sendPasswordResetEmail(emailAddress).then(function() {
alert('パスワード再設定の確認メールを送りました！')
}).catch(function(error) {
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.signin {
margin-top: 20px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center
}
input {
margin: 10px 0;
padding: 10px;
}
</style>
だいぶvueファイルの書き方に慣れてきましたでしょうか？
<template>の記載内容はそこまで複雑ではないですね。v-modelにusernameとpasswordをそれぞれ持たせています。
そして、@click="signIn"で、firebaseにusernameとpasswordを渡してログインチェックを行っています。
signIn: function () {
firebase.auth().signInWithEmailAndPassword(this.username, this.password).then(
user => {
this.$router.push('/')
},
ユーザがいたらthis.$router.push('/')でトップ画面に遷移させています。リダイレクトのようなものですね。
ログイン状態がわかるようにする。
ログインするとトップページに飛びますが、ログインしているのかしていないのかわかりません。
Home.vueファイルを少し修正しログインしている状態だとIDとメアドが見えるようにしてみます。
<template>
<div class="home">
<p>{{uid}} | {{email}}</p>
<img alt="Vue logo" src="../assets/logo.png">
<h2>{{mymsg}}</h2>
<button @click="yaruyarusagi">ボタン</button>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import firebase from 'firebase'
export default {
name: 'home',
components: {
HelloWorld
},
data () {
return {
mymsg: "やるやるさぎはだめ" ,
uid: "",
email: ""
}
},
created: function(){
this.db = firebase.auth().currentUser
this.uid = this.db.uid
this.email = this.db.email
},
methods: {
yaruyarusagi: function () {
if(this.mymsg == "やるやるさぎはだめ") {
this.mymsg = "だめだめ"
console.log(mymsg)
}
else {
this.mymsg = "やるやるさぎはだめ"
}
}
}
}
</script>
ここまでできたら一度ログインしてみましょう。ログイン後、トップ画面で以下の図のようにIDとメアドが表示されていればOKです。
パスワードリセットも入れておく
あと、Signin.vueにはパスワードを忘れたときのために、再送ができる設定も組み込んでいます。以下の個所ですね。
resetpass: function () {
const auth = firebase.auth()
const emailAddress = this.re_email
auth.sendPasswordResetEmail(emailAddress).then(function() {
alert('パスワード再設定の確認メールを送りました！')
}).catch(function(error) {
})
すべてfirebase側で良しなにやってくれます。結構使う場面は多いと思いますので、必勝パターンとして覚えておきましょう。
constやらvarやらがでてきますが、constは書き換えしない形（定数）で使い、varは書き換えする形で使ってあげましょう。勢いモック程度であれば、すべてvarで作ってしまうほうが楽かもしれませんね。
ここまでで登録／ログイン周りはいい感じに作れたかと思います。
次回はfirebaseに基本的なデータ（有名スポットのデータ）を流し込み、そのデータを表示させる仕組みを作ってみましょう。