Nuxt.js + firebaseでハマったこと

F34c64bc7a4bced65306809205aca33c?s=47 Logy
August 26, 2020
Programming
0
860

Nuxt.js + firebaseでハマったこと

フロントエンドLT会 vol.1 -2020夏祭り-

F34c64bc7a4bced65306809205aca33c?s=128

Logy

August 26, 2020
Tweet

More Decks by Logy

See All by Logy
F34c64bc7a4bced65306809205aca33c?s=48 nologyance
2
450

Other Decks in Programming

See All in Programming
404139d782ec666acea93dffc86e089f?s=48 sylph01
1
960
A030c34a2bc0d0610b4d87f8c56a2ab7?s=48 masatomix
0
130
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
120
36ee3f54c56704a49805ffb32b596930?s=48 44x1carbon
0
110
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
100
Bc87ea9c7a0f85b8761b716a677c6694?s=48 adammc331
0
160
1fe64ebb176498be5f73ab51986c6b7b?s=48 davidfowl
9
3.4k
40575ebf9c2f4a6e3bcb68630f446a3b?s=48 tomzoh
4
110
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
1
320
Acb6390b6c4b5192f40e10601b63dafc?s=48 twkiiim
0
230
8fb8810e5e06a997bc13831b9b51007f?s=48 keinuma
0
690
9da5d5cc4b6a9f28058152e28364b02a?s=48 prof18
1
130

Featured

See All Featured
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
112
24k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
14k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.3k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
197
19k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
540
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.7k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
190
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
24
1.7k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
185
14k

Transcript

  1. Nuxt.js+firebaseͰϋϚͬͨ ͜ͱ ϑϩϯτΤϯυLTձ vol.1 -2020ՆࡇΓ- ଠా୓໵

  2. ࣗݾ঺հ • ଠా୓໵ • גࣜձࣾϥΫε • HRTechྖҬͷ੡඼։ൃ • Nuxt.js,Firebaseॳ৺ऀ,ॳLT 2

  3. ໨࣍ • Nuxt.js+firebaseΛ৮Ζ͏ͱࢥ͖͔͚ͬͨͬ • ϋϚͬͨ͜ͱᶃ currentUserೖͬͯͳ͍໰୊ • ϋϚͬͨ͜ͱᶄ ίϯιʔϧΤϥʔ஍ࠈ •

    ͓ΘΓʹ 3

  4. Nuxt.js+firebaseΛ৮Ζ͏ͱࢥͬͨ ͖͔͚ͬ 4

  5. Nuxt.js+firebaseΛ৮Ζ͏ͱࢥ͖͔͚ͬͨͬ • ϑϩϯτΤϯυྗͷఈ্͛ • ؆୯ͳTODOΞϓϦΛ࡞Δ • όοΫΤϯυ͸ۃྗؾʹͨ͘͠ͳ͍͚Ͳɺೝূػೳ͘Β͍͸࡞Γ͍ͨ - FirebaseΛ࢖͑͹޾ͤʹͳΕΔͱ͍͏ᷚΛࣖʹ͢Δ 5

  6. Firebase

  7. ϋϚͬͨ͜ͱᶃ currentUserೖͬͯͳ͍໰୊ 7

  8. currentUserೖͬͯͳ͍໰୊ • ΍Γ͔ͨͬͨ͜ͱ - ϢʔβʔͷϩάΠϯঢ়ଶΛνΣοΫ͔ͨͬͨ͠ - firebase.auth().currentUserΛ࢖͑͹ྑ͍Β͍͠ • ެࣜυΩϡϝϯτ௨Γʹ࣮૷ͯ͠ϩάΠϯͯ͠Έͯ΋ɺͳ͔ͥ firebase.auth().currentUser͕͍ͭ΋nullͰฦͬͯ͘Δ

    8

  9. currentUserೖͬͯͳ͍໰୊ • ಉ͡ηΫγϣϯͷ͙͢Լʹ஫ҙॻ͖Λൃݟ - authΦϒδΣΫτͷॳظԽ͕ऴΘ͍ͬͯͳ͍ͱnull͕ฦͬͯ͘Δ • ୅ΘΓʹobserverʢonAuthStateChangedϝιουʣΛ࢖͏͜ͱͰղܾ 9

  10. currentUserೖͬͯͳ͍໰୊ • ڭ܇ - ެࣜυΩϡϝϯτ͸ͪΌΜͱಡΈ·͠ΐ͏ 10

  11. ϋϚͬͨ͜ͱᶄ ίϯιʔϧΤϥʔ஍ࠈ 11

  12. ίϯιʔϧΤϥʔ஍ࠈ • ΍Γ͔ͨͬͨ͜ͱ - firebase authenticationͰϩάΠϯ͍ͯ͠ΔϢʔβʔ৘ใΛvuexͰอଘ͔ͨͬͨ͠ - onAuthStateChangedͷίʔϧόοΫͰऔಘͰ͖ΔUserΦϒδΣΫτΛ࢖͑͹ྑ ͍Β͍͠ -

    औಘͨ͠UserΦϒδΣΫτΛͦͷ··vuexʹ֨ೲ 12

  13. ίϯιʔϧΤϥʔ஍ࠈ • Chrome͕ݻ·Δ੎͍Ͱ૿͑ଓ͚ΔΤϥʔ… - Error: [vuex] Do not mutate vuex

    store state outside mutation handlers. • mutationϝιουܦ༝Ͱ͔͠࿔ͬͯͳ͍͸ͣͳͷʹͳͥ…ʁ 13

  14. ίϯιʔϧΤϥʔ஍ࠈ • ಉ͡ࣄ৅ʹ͍ͭͯॻ͔Εͨͱ͋ΔهࣄΛൃݟ - Firebase AuthenticationͱVuexͷ߹ΘٕͤόάͰϋϚͬͨ • UserΦϒδΣΫτʹϦεφʔ΍Β͕ੜ͍͑ͯͯɺݟ͑ͳ͍ͱ͜Ζ͔Β มߋ͕Ճ͑ΒΕ͍ͯΔՄೳੑେ •

    Α͘Α͘ݟΔͱΤϥʔϝοηʔδ͸firebaseଆͷιʔε ʮauth.esm.jsʙʯ͔Βग़ྗ͞Ε͍ͯΔ༷ࢠ 14

  15. ίϯιʔϧΤϥʔ஍ࠈ • هࣄʹॻ͔Ε͍ͯͨΑ͏ʹɺҰ౓ผͷม਺ʹ֨ೲͯͦͪ͠ΒΛӬଓԽ ͢ΔΑ͏ʹ͢Δͱແࣄղܾ • ͦ΋ͦ΋UserΦϒδΣΫτશମΛӬଓԽ͢Δඞཁ΋ͳ͍ͷͰɺඞཁͳ ෼͚ͩ٧Ίସ͑Δͷ͕ྑ͛͞ 15

  16. ίϯιʔϧΤϥʔ஍ࠈ • ڭ܇ - Τϥʔϝοηʔδ͸ͪΌΜͱಡΈ·͠ΐ͏ 16

  17. ͓ΘΓʹ 17

  18. ͓ΘΓʹ • ׳Εͳ͍ٕज़Ͱ͋ͬͯ΋جຊʹཱͪฦΔʢެࣜυΩϡϝϯτΛಡΉɺ ΤϥʔϝοηʔδΛಡΉʣ͜ͱ͕τϥϒϧղফ΁ͷۙಓ • ଟগϋϚͬͨ΋ͷͷɺೝূػೳ͸͙͢ʹ࣮૷Ͱ͖ͨ - Nuxt.js + firebase࠷ߴʂ

    18

  19. ࢀߟ • kuntalog.hatenablog.jp/entry/2019/01/07/Firebase_Authentication ͱVuexͷ߹ΘٕͤόάͰϋϚͬͨ 19