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

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

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

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

Vuex

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

Q&A

解決済

2回答

1673閲覧

firebaseでのログアウト機能が実行できない

konnnitiha

総合スコア1

Firebase

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

Vuex

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

0グッド

0クリップ

投稿2021/12/29 10:00

編集2022/01/12 13:37

前提・実現したいこと

firebaseのログアウト機能を使ってログアウトをしたい

発生している問題・エラーメッセージ

エラーメッセージ ypeError: Cannot read properties of null (reading 'displayName') at Object.eval [as next] (index.js?4360:43) at eval (index.esm.js?a8e9:1392) at eval (index.esm.js?a8e9:1502) //TypeError:nullのプロパティを読み取ることができません( 'displayName'を読み取る)

該当のソースコード

store

1import Vue from 'vue' 2import Vuex from 'vuex' 3import firebase from 'firebase' 4import router from '@/router' 5//import createPersistedState from 'vuex-persistedstate' 6 7Vue.use(Vuex) 8 9export default new Vuex.Store({ 10 state: { 11 username: '', 12 userNames: [], 13 email: '', 14 password: '', 15 }, 16 getters: { 17 setUsername(state) { 18 return state.username 19 }, 20 setUsers(state) { 21 return state.userNames 22 } 23 }, 24 mutations: { 25 registerState(state, payload) { 26 state.username = payload.username 27 state.email = payload.email 28 state.password = payload.password 29 }, 30 loginState(state, payload) { 31 state.username = payload.username 32 state.email = payload.email 33 state.password = payload.password 34 }, 35 setUser(state, payload) { 36 state.username = payload.username 37 } 38 }, 39 actions: { 40 setUser(context, payload) { 41 const db = firebase.firestore() 42 firebase.auth().onAuthStateChanged((username) => { 43 payload.username = username.displayName; 44 }) 45 db.collection('user').orderBy('namber', 'desc').limit(3) 46 .get() 47 .then((querySnapshot) => { 48 querySnapshot.forEach((doc) => { 49 // doc.data() is never undefined for query doc snapshots 50 console.log(doc.get('username')) 51 this.state.userNames.push(doc.get('username')) 52 console.log(this.state.userNames) 53 }); 54 }) 55 .then(() => { 56 context.commit('setUser', payload) 57 }) 58 .catch((error) => { 59 console.log("Error getting documents: ", error); 60 }); 61 console.log(this.state.userNames) 62 }, 63 signOut() { 64 firebase.auth().signOut() 65 .then(() => { 66 router.push('/login') 67 }) 68 .catch((e) => { 69 console.error('エラー :', e.message) 70 }) 71 }, 72 newRegister(context, payload) { 73 firebase 74 .auth() 75 .createUserWithEmailAndPassword(payload.email, payload.password) 76 .then(() => { 77 const user = firebase.auth().currentUser 78 user.updateProfile({ 79 displayName: payload.username, 80 },) 81 .then(() => { 82 // データベースへ登録 83 const db = firebase.firestore(); 84 db.collection("user").doc(user.uid).set({ 85 uid: user.uid, 86 email: payload.email, 87 password: payload.password, 88 username: payload.username, 89 namber: firebase.firestore.Timestamp.fromDate(new Date()) 90 }) 91 }) 92 .then(() => { 93 context.commit('registerState', payload) 94 }) 95 .then(() => { 96 router.push('/about') 97 })}) 98 .catch((e) => { 99 console.error('エラー :', e.message) 100 }) 101 }, 102 loginUser(context, payload) { 103 firebase 104 .auth() 105 .signInWithEmailAndPassword(payload.email, payload.password) 106 .then(() => { 107 context.commit('loginState', payload) 108 }) 109 .then(() => { 110 console.log("ログイン成功!"); 111 router.push('/about'); 112 }) 113 .catch((e) => { 114 console.error('エラー :', e.message) 115 }) 116 } 117 }, 118})

vue

1<ul> 2 <li class="userList">{{username}}さんようこそ</li> 3 <span class="balance">残高 : 1000</span> 4 <button class="login-btn button is-info" @click="signOut">ログアウト</button> 5 </ul> 6... 7 methods: { 8 signOut() { 9 this.$store.dispatch('signOut') 10 } 11 },

試したこと

自分なりの解釈はログアウトしたいユーザーが読み取られていないからdisplaiName: Null になってしまっているのかなと思い、
firebase.auth().onAuthStateChanged((username) => { やfirebase.auth().currentUser
のコードでログインしているユーザーを取得して、displayNameを指定してあげれば実装できると思い、行ってみましたが、同じエラーが発生してしまいました、どのようにすればエラーが表示されなくなるのか改善すべき点などありましたら教えていただきたいです。

補足

vueに直書きせずにactions経由で実装させようと思っています。

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

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

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

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

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

guest

回答2

0

ベストアンサー

firebase.auth().onAuthStateChangeはログイン状態が変化した際に動作しますので、ログアウト直後の動作で問題が出ているのかなと思います。

このようにしてみたらいかがでしょう。

firebase.auth().onAuthStateChanged((username) => { if(username) payload.username = username.displayName; })

投稿2022/01/12 04:37

necoCat

総合スコア20

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

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

0

ログインした時点でユーザー名は表示出来るのでしょうか?

投稿2021/12/30 04:41

qqfsdfsafd

総合スコア599

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問