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
160
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
69
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
160
Nuxt3にStorybookを正しく入れてみた
gityosan
0
700
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
440
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
380
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
80
Other Decks in Programming
See All in Programming
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
140
Jakarta EE Meets AI
ivargrimstad
0
750
Lambda(Python)の リファクタリングが好きなんです
komakichi
4
230
2ヶ月で生産性2倍、お買い物アプリ「カウシェ」4チーム同時改善の取り組み
ike002jp
1
110
ニーリーQAのこれまでとこれから
nealle
2
140
Cline with Amazon Bedrockで爆速開発体験ハンズオン/ 株式会社ブリューアス登壇資料
mhan
0
110
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.9k
Making TCPSocket.new "Happy"!
coe401_
1
2.9k
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
380
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.2k
The Implementations of Advanced LR Parser Algorithm
junk0612
1
1.3k
監視 やばい
syossan27
12
10k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
Designing for humans not robots
tammielis
253
25k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Why Our Code Smells
bkeepers
PRO
336
57k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Speed Design
sergeychernyshev
29
920
GitHub's CSS Performance
jonrohan
1030
460k
Six Lessons from altMBA
skipperchong
28
3.7k
Optimizing for Happiness
mojombo
378
70k
The Language of Interfaces
destraynor
157
25k
Making Projects Easy
brettharned
116
6.2k
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
ご清聴ありがとうございました