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

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

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

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

Firebase

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

Nuxt.js

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

Q&A

0回答

709閲覧

Nuxt.js〜firebaseデプロイ後にログイン情報が永続化できない〜

sanezane

総合スコア91

Vue.js

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

Firebase

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

Nuxt.js

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

0グッド

1クリップ

投稿2020/02/11 11:10

編集2022/01/12 10:55

発生している事象

  • 再読み込みすると認証が必要なページに遷移できなくなる(ローカルでは永続化できている)
  • クッキーは消えていない(↓にエビデンス有り)

認証が必要なページの判定をしているmiddleware

/** * 認証が必要なページで未認証の場合はリダイレクトする */ export default function({ store, redirect, commit }) { if ( store.state.authenticate.id === null || typeof store.state.authenticate.id === 'undefined' ) { redirect('/signup') } }

↑こんな感じでauthenticate.idに値が入っていなかったら未認証とみなしてsignupページへリダイレクトするようにしている

事象的にはこれが効いてしまっている。。。ということはauthenticate.idに値が入っていない

一番最初にクッキーを設定している実装

  • 1.loginアクションにてuser_idとしてクッキーをセット

action

1/** ログイン処理 */ 2 async login({ commit }, loginUserFilter: InputUserFilter) { 3 const response = await fireApp 4 .auth() 5 .signInWithEmailAndPassword( 6 loginUserFilter.email, 7 loginUserFilter.password 8 ) 9 if (response.operationType === 'signIn') { 10 commit('setloginStatus', { loginStatus: true }) 11 12 const authUser = { 13 id: response.user.uid, 14 email: response.user.email, 15 name: response.user.displayName 16 } 17 const cookies = new Cookies() 18 cookies.set('user_id', JSON.stringify(response.user.uid)) 19 // firebase上のログインデータ取得まで確認済み 20 commit('setId', { id: authUser.id }) 21 commit('setEmail', { email: authUser.email }) 22 commit('setName', { name: authUser.name }) 23 } 24 },

再読み込みに対応した(ハズ)のmiddleware

  • 1.middlewareにてuser_idクッキーを取得しstoreへ格納する

middleware

1import Cookies from 'universal-cookie' 2 3export default ({ req, store }) => { 4 if (process.browser) { 5 return 6 } 7 const cookies = new Cookies(req.headers.cookie) 8 const userId = cookies.get('user_id') 9 store.commit('authenticate/setId', { id: userId }) 10} 11

再読み込み前のクッキー

イメージ説明

再読み込み後のクッキー

イメージ説明

クッキーは消えていない

  • ご指摘があればいただけると嬉しいです。

追記

middlewareの挙動でローカルと本番で異なる

  • ローカルだとif (process.browser)の所には入らないのに本番だと入ってしまいreturnされ、終わる。。。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問