Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue3+Firebase Auth環境で苦労した話
Search
IIHARA
January 30, 2024
Programming
0
160
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
69
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
160
Nuxt3にStorybookを正しく入れてみた
gityosan
0
700
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
430
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
380
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
80
Other Decks in Programming
See All in Programming
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
140
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
140
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
130
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3.1k
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.2k
個人開発の学生アプリが企業譲渡されるまで
akidon0000
0
830
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
110
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
410
Exit 8 for SwiftUI
ojun9
0
140
The Implementations of Advanced LR Parser Algorithm
junk0612
1
340
Making TCPSocket.new "Happy"!
coe401_
1
1.7k
Java 24まとめ / Java 24 summary
kishida
3
500
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Side Projects
sachag
452
42k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Scaling GitHub
holman
459
140k
Rails Girls Zürich Keynote
gr2m
94
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Adopting Sorbet at Scale
ufuk
76
9.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to train your dragon (web standard)
notwaldorf
90
6k
Transcript
Vue3+Firebase Auth 環境で苦労した話 第3 木曜LT 会 #1 飯原帆隆/ 株式会社メタップスホールディングス
目次 01 自己紹介 02 前提状況 03 最終的な実装 第3 木曜LT 会
#1 2
飯原帆隆 メタップスホールディングス( 株) エンジニア 23 新卒で入社後、re:shine 開発を担当 Vue/Nuxt Rails Lit
を主に書きます X: https://twitter.com/iihara_gityo Github: https://github.com/Gityosan Qiita: https://qiita.com/Gityosan Zenn: https://zenn.dev/iihara 第3 木曜LT 会 #1 / 自己紹介 3
メタップスホールディングス 「UNLEASH THE WORLD( 世界を解き放つ) 」をビジョンに re:shine とSRE:shine の二つのサービスを展開 第3
木曜LT 会 #1 / 自己紹介 4
None
None
re:shine ではフロントでVue3 とFirebaseAuth を利用 リロード時などに上手くハンドリングできない事象が発生 第3 木曜LT 会 #1 /
前提状況 7
main.ts でvue-router のbeforeEach フックにmiddleware(routing-guard) を 登録しリロード時や遷移時に適切なルーティングができるようにしてい た。 firebase のonAuthStateChanged はfirebase
と接続ができた時やログイ ン・ログアウト時に登録したcallback を実行するがmiddleware と非同期的 に実行されていたため、callback の実行タイミングによってログインして いるのに未ログイン状態と判定されることがあった。 第3 木曜LT 会 #1 / 前提状況 8
第3 木曜LT 会 #1 / 前提状況 9
→ middleware(routing-guard) の処理をonAuthStateChanged の callback 内に移動 (provide/inject を用いた状態管理を行っている場合、middleware で状態管理 している変数を上手く呼び出せないため、そこからしてもcallback
内に移 動する必要がある) 第3 木曜LT 会 #1 / 最終的な実装 10
ご清聴ありがとうございました