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
130
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
59
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
120
Nuxt3にStorybookを正しく入れてみた
gityosan
0
550
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
220
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
260
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
50
Other Decks in Programming
See All in Programming
dbt-ga4パッケージを実業務に導入してみた話
t_tokumaru_feedcorp
0
120
CSC305 Lecture 01
javiergs
PRO
1
150
タイミーにおけるデータの利用シーンと データ基盤の挑戦
marufeuille
4
3.2k
VS Code extension: ドラッグ&ドロップでファイルを並び替える
ttrace
0
170
Kubernetes上でOracle_Databaseの運用を楽にするOraOperatorの紹介
nnaka2992
0
150
2024-10-02 dev2next - Application Observability like you've never heard before
jonatan_ivanov
0
170
Iteratorでページネーションを実現する
sonatard
3
710
게임 개발하던 학생이이 세계에선 안드로이드 개발자?
pangmoo
0
100
標準ライブラリの動向とイテレータのパフォーマンス
makki_d
3
200
CSC509 Lecture 03
javiergs
PRO
0
140
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
830
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
340
Featured
See All Featured
Faster Mobile Websites
deanohume
304
30k
KATA
mclloyd
27
13k
Design by the Numbers
sachag
278
19k
Clear Off the Table
cherdarchuk
91
320k
Navigating Team Friction
lara
183
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
How To Stay Up To Date on Web Technology
chriscoyier
787
250k
We Have a Design System, Now What?
morganepeng
49
7.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Web development in the modern age
philhawksworth
205
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
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
ご清聴ありがとうございました