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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. Firebase
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. ͓ΘΓʹ
    17
    

    View Slide

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

    View Slide

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

    View Slide