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
80
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
37
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
97
Nuxt3にStorybookを正しく入れてみた
gityosan
0
380
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
150
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
100
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
27
Other Decks in Programming
See All in Programming
Fragment Composition of GraphQL
quramy
14
1.6k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.1k
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
11
910
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
400
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
460
Going beyond Apache Parquet's default settings
xhochy
0
150
最近コードレビューで指摘したこと
forrep
3
100
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
0
190
Implementing Design Systems in Swift
seyfoyun
2
520
CQRS meets modern Java
simas
PRO
2
450
FoodGram
iseruuuuu
0
230
Featured
See All Featured
Navigating Team Friction
lara
179
13k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
KATA
mclloyd
16
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
91
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
What's new in Ruby 2.0
geeforr
338
31k
Side Projects
sachag
451
41k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
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
ご清聴ありがとうございました