発生している事象
- 再読み込みすると認証が必要なページに遷移できなくなる(ローカルでは永続化できている)
- クッキーは消えていない(↓にエビデンス有り)
認証が必要なページの判定をしている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
され、終わる。。。
あなたの回答
tips
プレビュー