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
180
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
74
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
170
Nuxt3にStorybookを正しく入れてみた
gityosan
0
750
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
570
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
410
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
93
Other Decks in Programming
See All in Programming
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
CSC305 Lecture 12
javiergs
PRO
0
240
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Ktorで簡単AIアプリケーション
tsukakei
0
110
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
200
What's new in Spring Modulith?
olivergierke
1
170
Pythonに漸進的に型をつける
nealle
1
130
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
CSC509 Lecture 07
javiergs
PRO
0
250
マンガアプリViewerの大画面対応を考える
kk__777
0
370
SODA - FACT BOOK(JP)
sodainc
1
8.9k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Docker and Python
trallard
46
3.6k
Designing for humans not robots
tammielis
254
26k
Balancing Empowerment & Direction
lara
5
700
Rails Girls Zürich Keynote
gr2m
95
14k
A designer walks into a library…
pauljervisheath
209
24k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
For a Future-Friendly Web
brad_frost
180
10k
Embracing the Ebb and Flow
colly
88
4.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
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
ご清聴ありがとうございました