Vue.js＋Firebase+Stripeをさわさわしてみるーその４



その４です。はやいものですね。
前回は登録画面を作成しました。今回はログイン画面を作成するところからはじめましょう。

##ログイン画面を作成する
まずはviewsフォルダの中にSignin.vueファイルを作成します。作成したら以下のように記述しましょう。

```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とメアドが見えるようにしてみます。

```views/Home.vue
<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です。

![図1.png](https://qiita-image-store.s3.amazonaws.com/0/293340/5b738ffd-a162-7e44-d867-f073f1811dd1.png)

##パスワードリセットも入れておく
あと、Signin.vueにはパスワードを忘れたときのために、再送ができる設定も組み込んでいます。以下の個所ですね。

```views/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に基本的なデータ（有名スポットのデータ）を流し込み、そのデータを表示させる仕組みを作ってみましょう。