#概要
・ポートフォリオでゲストユーザー機能を実装したので言葉での説明とコード例を紹介
・使用技術はVue.jsとFirebase
・開発環境はVue-Cli
#考え方
あらかじめゲストユーザーのアカウントを作成しておき、ボタンを押すと自動的にそのゲストユーザーのemailとpasswordを使ってログインされるようにするだけ。
ゲストユーザーのemailは「guest@example.com」、password「guests」としてあらかじめアカウントを作成しておく。
通常ログインとの違いは下記の通り。
■通常ログイン
formにemailとpasswordを入力し、その値を引数として使ってfirebaseのsignInWithEmailAndPasswordでログインする。
■ゲストログイン
ボタンを押すとゲストログインの関数が実行され、signInWithEmailAndPasswordに変数ではなく、直接「guest@example.com」と「guests」を渡す。
#コードは以下の通り
login.vue
methods: {
loginWithGestUser(){
//formに入力したemailやpasswordではなく、予め登録されているものを直接渡す
this.$store.dispatch("loginWithGestUser", {email: "guest@example.com", password: "guests"})
}
}
store.js
loginWithGestUser({commit}, payload){
firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
.then(
user => {
const guestUser = {
//省略。。。
}
}
commit("setLoginUser", guestUser)
})
}