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
170
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
72
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
170
Nuxt3にStorybookを正しく入れてみた
gityosan
0
730
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
490
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
390
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
83
Other Decks in Programming
See All in Programming
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
ReadMoreTextView
fornewid
1
480
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
660
GoのGenericsによるslice操作との付き合い方
syumai
3
690
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
520
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
820
童醫院敏捷轉型的實踐經驗
cclai999
0
200
Featured
See All Featured
KATA
mclloyd
30
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing for Performance
lara
609
69k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Optimizing for Happiness
mojombo
379
70k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Become a Pro
speakerdeck
PRO
28
5.4k
Done Done
chrislema
184
16k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Code Reviewing Like a Champion
maltzj
524
40k
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
ご清聴ありがとうございました