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
130
Nuxt3にStorybookを正しく入れてみた
gityosan
0
560
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
230
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
270
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
52
Other Decks in Programming
See All in Programming
いかにして不足・不整合なくデータ移行したか
tjmtmmnk
1
910
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
100
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
670
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2.1k
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
230
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
140
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
2k
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
250
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
1.2k
個人開発で使ってるやつを紹介する回
yohfee
1
730
知られざるNaNの世界
hole
3
1.1k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Scaling GitHub
holman
458
140k
Gamification - CAS2011
davidbonilla
80
5k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Invisible Side of Design
smashingmag
297
50k
How GitHub (no longer) Works
holman
311
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
Adopting Sorbet at Scale
ufuk
73
9k
The Cult of Friendly URLs
andyhume
77
6k
Why Our Code Smells
bkeepers
PRO
334
57k
Teambox: Starting and Learning
jrom
132
8.7k
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
ご清聴ありがとうございました