前提・実現したいこと
Nuxt(SPA)+Firebase-AuthでGoogleログインを実現しようとしています。
signInWithRedirectとsignInWithEmailAndPassword の2種類のログインを実装しています。
Vuetify利用
発生している問題
signInWithEmailAndPassword()の場合はうまく行きますが、signInWithRedirect()の場合$storeのデータが消えてしまいます。
どちらも非同期で auth.onAuthStateChanged()が呼ばれるので、そこで store.commit('setUser', authUser)しています。
$storeのデータがすべて消えるのではなく、authUserの値だけが消えます。
多くのファイルが関連しているので、どれだけ掲載すればいいのかわかりませんので、厳選して出します。不足ありましたらご指摘ください。
よろしくおねがいします。
該当のソースコード
~/plugin/fileauth.js import { auth } from '@/services/fireinit.js' export default ({ store }) => { return new Promise((resolve, reject) => { auth.onAuthStateChanged((authUser) => { if (authUser) { console.log('onAuthStateChanged: ' + authUser.displayName) store.commit('setUser', authUser) } else { console.log('onAuthStateChanged: Logout') } resolve() }) }) }
~/store/index.js import Vuex from 'vuex' import firebase, { auth } from '~/services/fireinit.js' const createStore = () => { return new Vuex.Store({ state: { authUser: null, alive: 'I am alive' }, getters: { activeUser: (state, getters) => { return state.authUser }, isLoggedIn: (state, getters) => { return !!state.authUser }, }, mutations: { setUser (state, payload) { if (payload) { console.log('setUser:' + payload.displayName) } else { console.log('resetUser') } state.authUser = payload }, resetUser (state) { console.log('resetUser') state.authUser = null } }, actions: { // 問題の呼び出し signInWithGoogle ({ commit }) { const provider = new firebase.auth.GoogleAuthProvider() return new Promise((resolve, reject) => { auth.signInWithRedirect(provider) resolve() }) }, // 問題の無い呼び出し signInWithEmail ({ commit }, { email, password }) { return new Promise((resolve, reject) => { auth.signInWithEmailAndPassword(email, password) resolve() }) }, } }) } export default createStore
どちらも同じ auth.onAuthStateChanged から同じ store.commit('setUser') を呼んでいるにも関わらず保存されたりされなかったりします。
確認しているのはこのページです。
ログインは成功していて、console.logでは authUser.displayNameは正しくセットされて返ってきています。
それにも関わらず $store.state.authUserが nullになります。
~/page/inspire.vue <template> <v-row> <v-col class="text-center"> <div v-if="$store.state.authUser"> ログインしている {{ $store.state.authUser.displayName }} </div> <div v-else> ログインしていない </div> <div v-if="$store.state.alive"> Storeは生きています </div> <blockquote class="blockquote"> <p v-if="User">Hello {{ User.displayName }} !!</p> “First, solve the problem. Then, write the code.” </blockquote> </v-col> </v-row> </template> <script> export default { data () { return { User: this.$store.state.authUser } } } </script>
$store に alive: String を追加してみましたが、それは消えないで authUserだけが消えます。
vuex-persistedstateはインストールしています。
よろしくおねがいします。
追記
vuex-persistedstate がLocalStorageへの書き込みを失敗してるというところまでわかりました。
読み込みは動いているので、空のstoreが読み込まれてしまってます。
vuex-persistedstateをやめることで、動作はするのですが、persistedにしたい気持ちは残っていますので、時間のあるときに引き続き調査いたします。
あなたの回答
tips
プレビュー