ゲストユーザー機能【Vue.js/Firebase】

概要

・ポートフォリオでゲストユーザー機能を実装したので言葉での説明とコード例を紹介
・使用技術はVue.jsとFirebase
・開発環境はVue-Cli

考え方

あらかじめゲストユーザーのアカウントを作成しておき、ボタンを押すと自動的にそのゲストユーザーのemailとpasswordを使ってログインされるようにするだけ。

ゲストユーザーのemailは「[e-mail]」、password「guests」としてあらかじめアカウントを作成しておく。
通常ログインとの違いは下記の通り。

■通常ログイン
formにemailとpasswordを入力し、その値を引数として使ってfirebaseのsignInWithEmailAndPasswordでログインする。

■ゲストログイン
ボタンを押すとゲストログインの関数が実行され、signInWithEmailAndPasswordに変数ではなく、直接「[e-mail]」と「guests」を渡す。

コードは以下の通り

login.vue

methods: {
    loginWithGestUser(){
      //formに入力したemailやpasswordではなく、予め登録されているものを直接渡す
      this.$store.dispatch("loginWithGestUser", {email: "[e-mail]", password: "guests"})
    }
　}

store.js

loginWithGestUser({commit}, payload){
      firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
        .then(
          user => {
             const guestUser = {
                //省略。。。
              }
            }   
            commit("setLoginUser", guestUser)
          })
    }