Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Logy
August 26, 2020

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

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

Logy

August 26, 2020
Tweet

More Decks by Logy

Other Decks in Programming

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