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
140
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
63
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
140
Nuxt3にStorybookを正しく入れてみた
gityosan
0
620
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
280
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
310
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
65
Other Decks in Programming
See All in Programming
return文におけるstd::moveについて
onihusube
1
1.1k
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
2
100
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
470
良いユニットテストを書こう
mototakatsu
8
2.6k
たのしいparse.y
ydah
3
120
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
130
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
250
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
210
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
820
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
Building an army of robots
kneath
302
44k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Adopting Sorbet at Scale
ufuk
73
9.1k
A Tale of Four Properties
chriscoyier
157
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Building Applications with DynamoDB
mza
91
6.1k
Facilitating Awesome Meetings
lara
50
6.1k
The Cult of Friendly URLs
andyhume
78
6.1k
Scaling GitHub
holman
458
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
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
ご清聴ありがとうございました