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

F34c64bc7a4bced65306809205aca33c?s=47 Logy
August 26, 2020

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

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

F34c64bc7a4bced65306809205aca33c?s=128

Logy

August 26, 2020
Tweet

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