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

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

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

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

Firebase

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

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

Q&A

解決済

1回答

2499閲覧

SPAのNuxt + Firebaseでユーザー認証状態の永続化をしたい

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

Firebase

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

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

0グッド

0クリップ

投稿2021/02/20 08:08

Firebaseとnuxtを組み合わせたカラーコードを管理するアプリを作成しているのですが、storeにてログイン情報を管理中リロードをすると認証したユーザー情報が消えてしまいます。公式ドキュメントを見ながらfirebase.jsとstoreを以下のように設定したのですが解決が見えません。何卒よろしくお願いいたします。

firebase

1import firebase from 'firebase' 2 3if (!firebase.apps.length) { 4 firebase.initializeApp(option) 5 firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() => { 6 console.log('Initialized!') 7 }) 8} 9 10export default firebase

index

1import firebase from '~/plugins/firebase' 2const db = firebase.firestore(); 3const colorsRef = db.collection('colors') 4 5export const state = () => ({ 6 userUid: '', 7 userName: '', 8 loggedIn: false, 9 colors: [] 10}) 11 12export const mutations = { 13 loginUser(state) { 14 state.loggedIn = true 15 }, 16 setUserUid(state,userUid) { 17 state.userUid = userUid 18 }, 19 setUserName(state,userName) { 20 state.userName = userName 21 }, 22 addColor(state, color) { 23 state.colors.push(color) 24 }, 25 logoutUser(state) { 26 state.loggedIn = false 27 state.userUid = "" 28 state.userName = "" 29 }, 30} 31 32export const actions = { 33 login({ commit }) { 34 const provider = new firebase.auth.GoogleAuthProvider(); 35 firebase.auth().signInWithPopup(provider).then((result) => { 36 const user = result.user 37 firebase.auth().onAuthStateChanged((user) => { 38 if (user) { 39 commit('loginUser') 40 console.log('Login was successful') 41 commit('setUserUid', user.uid) 42 commit('setUserName', user.displayName) 43 } 44 }) 45 }).catch((error) => { 46 var errorCode = error.code 47 console.log('error : ' + errorCode) 48 }); 49 }, 50 logout({ commit }) { 51 firebase.auth().signOut().then(() => { 52 commit('logoutUser') 53 console.log('Logout was successful') 54 }).catch((error) => { 55 const errorCode = error.code 56 console.log('error :' + errorCode) 57 }) 58 }, 59 fetchColors({ commit }) { 60 colorsRef.get().then(res => { 61 res.forEach((doc) => { 62 commit('addColor', doc.data()) 63 }) 64 }).catch(error => { 65 console.log('error : ' + error) 66 }) 67 }, 68 addColor({commit}, color) { 69 console.log(color) 70 colorsRef.add({ 71 name: color.name, 72 code: color.code, 73 user: color.user 74 }).then((docRef) => { 75 commit('addColor', color) 76 }).catch((error) => { 77 console.error("Error adding color: ", error); 78 }) 79 } 80} 81 82export const getters = { 83 getUserUid(state) { 84 return state.userUid 85 }, 86 getUserName(state) { 87 return state.userName 88 }, 89 getColors(state) { 90 return state.colors 91 } 92} 93

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

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

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

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

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

guest

回答1

0

ベストアンサー

ログイン状態を継続したいページ内でcreated()を用いることでstoreの状態をキープ出来ました。

投稿2021/02/21 02:47

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問