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

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

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