質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

0回答

777閲覧

Nuxt(SPA)+Firebase-Authで signInWithRedirect()の場合だけ$storeのデータが保存されない

gambaldia

総合スコア266

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

1クリップ

投稿2021/03/21 17:15

編集2021/03/22 00:20

前提・実現したいこと

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> &#8220;First, solve the problem. Then, write the code.&#8221; </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にしたい気持ちは残っていますので、時間のあるときに引き続き調査いたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問