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
120
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
59
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
110
Nuxt3にStorybookを正しく入れてみた
gityosan
0
540
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
210
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
230
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
43
Other Decks in Programming
See All in Programming
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
210
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
110
TypeScriptとGraphQLを活用した変化に強いプロダクト作り
bicstone
4
550
BasicBasic認証
sadnessojisan
5
2.5k
楽しく簡単に!QRコードの読み取り機能を実装しよう
penguinsan_pg
1
190
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.2k
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.4k
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
840
Some more adventure of Happy Eyeballs
coe401_
2
150
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
3
580
プログラマのための音楽入門
cheebow
4
540
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
100
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Visualization
eitanlees
142
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
47k
Bash Introduction
62gerente
608
210k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Unsuck your backbone
ammeep
667
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Designing for Performance
lara
604
68k
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
ご清聴ありがとうございました