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

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

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

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

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

Firebase

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

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

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

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

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

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

ίϯιʔϧΤϥʔ஍ࠈ • Chrome͕ݻ·Δ੎͍Ͱ૿͑ଓ͚ΔΤϥʔ… - Error: [vuex] Do not mutate vuex store state outside mutation handlers. • mutationϝιουܦ༝Ͱ͔͠࿔ͬͯͳ͍͸ͣͳͷʹͳͥ…ʁ 13

ίϯιʔϧΤϥʔ஍ࠈ • ಉ͡ࣄ৅ʹ͍ͭͯॻ͔Εͨͱ͋ΔهࣄΛൃݟ - Firebase AuthenticationͱVuexͷ߹ΘٕͤόάͰϋϚͬͨ • UserΦϒδΣΫτʹϦεφʔ΍Β͕ੜ͍͑ͯͯɺݟ͑ͳ͍ͱ͜Ζ͔Β มߋ͕Ճ͑ΒΕ͍ͯΔՄೳੑେ • Α͘Α͘ݟΔͱΤϥʔϝοηʔδ͸firebaseଆͷιʔε ʮauth.esm.jsʙʯ͔Βग़ྗ͞Ε͍ͯΔ༷ࢠ 14

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

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

͓ΘΓʹ 17

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

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